HTML&CSS

DONGHYUN KOO·2020년 8월 20일
0

HTML&CSS

목록 보기
2/6
post-thumbnail

Margin과 Padding

P.example {
  width: 273px;
  height: 90px;
  margin: 50px;
  border: 5px solid black;
  padding: 50px;
}

margin

테두리 바깥의 여백이 margin입니다.

p.example {
  margin: 50px;
}

p.example {
  margin: 50px 50px 50px 50px;
}

p.example {
  margin-top: 50px;
  margin-right: 50px;
  margin-bottom: 50px;
  margin-left: 50px;
}
동일한 내용의 코드

padding
테두리 안 쪽의 초록색 영역이 padding

p.example {
padding: 50px;
}

p.example {
padding: 50px 50px 50px 50px;
}```

p.example {
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
}

Position

position: relative;

위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있음

.relative {
  position: relative;
}
.top-20 {
  top: -20px;
  left: 30px;
}

absolute

position: absolute; 는 이름과 같이 절대적인 위치에 둘 수 있습니다.

특정 부모에 대해 절대적으로 움직이게 됩니다.

p {
  margin: 0;
  background-color: yellow;
}
.absolute {
  position: absolute;
}
.right-0 {
  right: 0;
  bottom: 0;
}

0개의 댓글