[CSS] 4. 박스모델과 여백 상쇄

박스모델

---

박스 모델은 아래 그림과 같이 총 4구역으로 구분 된다. content  영역은 텍스트나 하위 박스 모델 등을 나타내고, padding은 border의 안쪽 여백, margin은 border의 바깥 여백을 나타내는 영역이다. border은 일반적인 테두리(선)을 나타내는 영역이라 보면 된다.

 

 

박스 모델을 이해하기 위해서는 필수적으로 알아야 할 css프로퍼티가 있다. 이를  box-sizing 이라 하는데, 이는 요소의 너비와 높이를 계산하는 방식을 지정한다. box-sizing의 지정 가능한 값에는 content-box와 border-dox가 있는데, 이를 각각 설명하면 다음과 같다.

* content-box content 영역만을 기준으로 계산하여, 해당 요소의 width(넓이)를 100px 값으로 설정한다면, content 영역의 너비만 고려하여 100px로 설정되며, padding과 border 영역은 별개로 계산된다. * border-box  content 영역뿐만 아니라 padding, border 영역을 모두 고려하여 계산된다. 즉, 넓이를 100px로 설정한다면, 3가지 영역의 설정 값을 합쳐서 100px가 되도록 설정되는 것이다. 만약  border과 padding 영역의 총 합이 20px 라면, content 영역의 값은 80px가 되는 것이다.

 

아래 예시를 보면 content-dox로 설정한 경우 총 넓이를 160px, 총 높이를 80px로 값을 설정하면, content 영역만 따로 넓이 160px, 높이 80px로 설정되고, 그 외 border과 padding 은  content 영역 설정 값과 상관 없이 자체적으로 설정한 값이 지정된 것을 볼 수 있다.

 

또한,  border-dox를 설정한 예시의 경우 총 넓이와 총 높이가 content 영역뿐만 아니라 border, padding 영역의 설정 값을 고려하여 content 영역의 높이와 넓이가 설정된 것을 확인할 수 있다.

 

 

여백 상쇄

---

 여백은 단순하게 너비나 높이에 더하여 계산될 것 같지만 실제로는 그렇지 않다. 그 이유는 여백 상쇄 때문인데, 인접한 같은 레벨의 블록 요소에 상하 여백이 겹치면 여백이 하나로 합쳐지는 현산을 여백 상쇄라고 한다. 즉, 인접한 여백 중 큰 크기의 여백으로 상쇄(적용)되는 것이다.

 

아래는 각각 인접한 여백이 서로의 값의 크기와 포함관계에 따라 여백 상쇄가 다르게 나타나고 있음을 확인할 수 있다.

 

단, 이러한 여백 상쇄는 display의 값이 flex, grid 이거나,

position의 값이 absolute, float인 상태일 때는 적용되지 않는다.