Spacing(여백 간격 다듬기)

요소 사이 간격을 보기 좋게 조절하고 싶다

바깥 여백 margin

margin 값으로 요소 바깥 간격을 조절합니다.

HTML

<div class="container">
  <div class="item item-a">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

CSS

/* 1. item-a 바깥 여백 */
.item-a {
  margin: 12px;
}

margin 크기: 12px

margin 크기

padding 값으로 내용과 테두리 사이 간격을 조절합니다.

HTML

<div class="box">
  Padding Sample
</div>

CSS

/* 1. 안쪽 여백 */
.box {
  padding: 16px;
}

padding 크기: 16px

Padding

padding 크기