CSS에서 패딩(padding) 작업하기
어떤 요소에 너비를
100px로 설정했다고 해보겠습니다. CSS에서 이것은
요소의 실제 너비가 정확히
100px가 될 것임을 의미하지는 않습니다.
padding을 추가하면 요소가 확장되어
width 속성에 지정된 값보다 커지기
때문입니다.
예제를 통해 살펴보겠습니다. 너비가
100 픽셀인 두 개의 블록을 만들어보겠습니다.
이때 두 번째 블록에는
padding을 설정하고 첫 번째 블록에는 설정하지 않습니다.
결과적으로 두 번째 블록은 패딩 크기만큼 더 커질 것입니다:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
background: #f1f1f1;
margin-bottom: 20px;
}
#elem2 {
padding: 25px; /* 패딩 설정 */
width: 100px;
height: 100px;
background: #f1f1f1;
}
:
