[CSS] 박스 모델, 박스 사이징

안녕하세요, Einere입니다.

(ADblock을 꺼주시면 감사하겠습니다.)

---

box model

다음과 같은 구성요소를 가집니다.

• padding
• border
• margin
• content

 

 

padding

content와 border사이의 여백

 

border

박스의 테두리

 

margin

박스의 border의 바깥의 여백

 

margin collapsing 1

형제 요소 간 마진 겹침입니다.

 

1. 인접한 다른 block요소들의 margin은 서로 겹칩니다.

 

위 스샷을 보면, one의 margin 10px이 two의 margin 20px과 겹치는 것을 확인할 수 있습니다.

 

2. 인접한 다른 inline요소들의 margin은 겹치지 않습니다.

 

display를 inline으로 바꾸니 서로의 margin이 겹치지 않는 것을 확인할 수 있습니다.

추가로, block요소를 inline요소로 바꾸니 상하 margin이 무시되네요. inline-block요소로 바꾸니 다시 상하 margin이 되살아나며, 서로 margin이 겹치지 않는 것도 유지됩니다.

 

margin collapsing 2

부모 자식 간 마진 겹침입니다.

 

1. 부모의 border속성이 있는 경우, 부모의 margin-top과 자식의 margin-top은 겹치지 않습니다.

2. 부모의 border속성이 없는 경우, 부모의 margin-top과 자식의 margin-top은 겹칩니다.

 

box-sizing

박스 요소는 width와 height를 포함한 여러가지 속성을 지정할 수 있습니다.

여기서, box-sizing은 width와 height를 어느 기준으로 할 것인지 지정하는 속성입니다.

 

값

content-box(기본값) : 너비와 높이를 content를 기준으로 합니다. 즉, 지정한 너비와 높이에 content는 포함되지만 padding과 border가 포함되지 않습니다.

border-box : 너비와 높이를 border를 기준으로 합니다. 즉, 지정한 너비와 높이에 content, padding, border를 포함합니다.

 

 

참고

https://www.inflearn.com/course/html-css-%EA%B0%95%EC%A2%8C-codesquad#

HTML,CSS 개발을 위한 핵심 가이드 - 인프런

https://www.inflearn.com/course/css-%EA%B8%B0%EB%B3%B8%EB%B6%80%ED%84%B0-%ED%99%9C%EC%9A%A9%EA%B9%8C%EC%A7%80/

CSS 기본부터 활용까지 - 인프런

https://developer.cdn.mozilla.net/ko/docs/Web/CSS/box-sizing

box-sizing