Box Model

Margin : 박스 보더에서 바깥쪽의 간격 (다른 태그와의 거리)

Border : 박스 보더에서 안쪽으로 있는 간격 (테두리)

Padding : Border를 중심으로 안쪽에 있는 간격 (Border와 content 사이 간격)

Content :  태그 영역

 

. padding과 margin은 width에 포함되지 않는다.

. box-sizing: border-box 이면 margin만 미포함 (기준은 border)

 

. box-sizing : 너비를 직접 일일이 계산하고 싶지 않을때 사용

 

. Padding 주는 순서 (Padding과 Margin 둘다 적용)

    - padding 10px 20px;   =>상.하는 10px 를 좌.우는 20px를 준다.

    - padding 10px 5px 30px 15px; => 상: 10px 우: 5px 하: 30px  좌: 15px 시계방향으로 준다.