박스모델 - 패딩(padding) 영역의 특징

 

패딩(padding)은 콘텐츠와 테두리 사이의 영역으로 배경색의 영향을 받는다. 패딩에 영역을 지정하면 테두리 안쪽의 전체 영역이 커진다.

 

<div>
기본영역<br/>
width:200px<br/>
height:100px
</div>

<div style="padding:20px;">
패딩 테스트<br/>
widht:200px+(20px+20px)<br/>
height:100px+(20px+20px)
</div>

 

 

 

 

위와 같이 패딩에 영역을 지정하면 테두리 안쪽의 전체 영역이 커진다. 패딩 영역은 배경색에 영향을 받는 영역이다.

 

  

패딩 스타일 속성들

• padding    // top, right, bottom, left
• padding-top
• padding-right
• padding-bottom
• padding-left

 

※패딩에는 auto 값이 없습니다.