[CSS] CSS 박스 모델을 구성하는 속성 다루기(padding 영역)

박스모델은 모든 HTML 요소가 사각형의 박스로 둘러쌓여있다는 개념으로

박스 형태의 요소들을 하나씩 원하는 곳에 배치해 원하는 모양으로 만들어 나가는 것이 웹 페이지를 만드는 본질이다.

 

박스 모델은 크게 다음과 같이 4가지 요소로 구성되고 앞서 정리한 margin, border 에 이어 padding에 대해 정리해보고자 한다.

 

1. padding 영역

 

padding 영역에서 사용할 수 잇는 속성은 margin 영역에서 사용하는 속성과 형식이 매우 비슷하다.

형식)
    padding-top:<크기>;
    padding-right:<크기>;
    padding-botton:<크기>;
    padding-left:<크기>;
    padding:[padding-top] [padding-right] [padding-bottom] [padding-left];
    padding:[padding-top] [padding-right] [padding-bottom];
    padding:[padding-top & padding-bottom] [padding-right & padding-left];
    padding:[padding-top & padding-bottom & padding-right & padding-left];

 

예시를 보면 이해하기 쉽다

박스모델을 보면 주황색이 margin, 초록색이 padding, 파란색이 content 영역이다.

여기서 초록색의 padding 영역은 박스 모델에서 margin, border 영역보다 안쪽에 있으므로

테두리 안쪽에 여백이 지정됨을 확인 할 수 있다.