[css] 박스 모델(box model) padding, margin, width, height

태그의 부피감을 결정한다. 태그는 박스에 둘러싸여 있다. 

padding은 테두리와 컨텐츠 사이의 간격을 말하고, margin은 태그와 다른 태그 사이의 간격이다.

 

padding과 margin을 각각

(20, 20) (40, 20)

(20, 40) (40, 40)

으로 설정했을 때의 결과이다.(단위는 px)

 

 

블럭모델은 보통 화면 전체를 사용한다. 화면 전체를 사용하지 않게 하려면 width 값을 주면 된다. 

라인9

 

 

근데 이 박스 모델이 inline element에서는 좀 다르게 동작한다. padding과 margin은 적용되는데, width 값은 무시한다.

 

 

 

box-sizing

div 태그에 width를 150px로 똑같이 줬는데 위와 아래의 크기가 달라보인다. width는 컨텐트 영역의 크기를 말하는거기 때문이다. 따라서 이렇게 박스 크기가 달라지는 것을 방지하기 위해서 box-sizing이라는 속성이 생겼다.

 

4번 줄처럼 *를 통해 모든 태그에 대해 box-sizing을 border-box로 주면 박스 크기가 달라지는 것을 막을 수 있다.