CSS에서 패딩(padding) 작업하기

어떤 요소에 너비를 100px로 설정했다고 해보겠습니다. CSS에서 이것은 요소의 실제 너비가 정확히 100px가 될 것임을 의미하지는 않습니다. padding을 추가하면 요소가 확장되어 width 속성에 지정된 값보다 커지기 때문입니다.

예제를 통해 살펴보겠습니다. 너비가 100 픽셀인 두 개의 블록을 만들어보겠습니다. 이때 두 번째 블록에는 padding을 설정하고 첫 번째 블록에는 설정하지 않습니다. 결과적으로 두 번째 블록은 패딩 크기만큼 더 커질 것입니다:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  background: #f1f1f1;
  margin-bottom: 20px;
}

#elem2 {
  padding: 25px; /* 패딩 설정 */
  width: 100px;
  height: 100px;
  background: #f1f1f1;
}

Результат: