상자 모델 채우기

요소 콘텐츠와 테두리 사이의 거리를 설정할 수 있는데, 이를 '패딩'이라고 합니다. 채우기도 위쪽, 오른쪽, 아래쪽, 왼쪽(시계방향)으로 나눌 수 있습니다. 다음 코드:

div{padding:20px 10px 15px 30px;}

순서를 혼동하지 마세요. 위 코드를 따로 작성할 수 있습니다.

div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

상단, 오른쪽, 하단, 왼쪽 패딩이 모두 10px인 경우

div{padding:10px;}

위와 같이 작성할 수 있습니다. 동일한 10px이고 왼쪽 및 오른쪽 패딩이 동일한 20px인 경우 다음과 같이 작성할 수 있습니다.

div{padding:10px 20px;}