The box model - Learn web development | MDN
The Box model
- CSS에는 크게 두 가지 종류의 박스가 있다. block과 inline.
- inline 박스는 width/height가 적용되지 않는다. 똑같이 padding, border, margin은 적용되지만, 즉 양 옆으로는 움직이게 만들 수 있지만, 위 아래로는 움직이게 만들 수 없다.
- 디폴트 값은 CSS 박스 모델은 컨텐트 박스이다.
✅ 여기서의 width의 의미는 content 박스 만을 의미! 그런데 이렇게 하면 실제로 우리에게 보여지는 width는 content + padding*2 + border*2가 된다. 그렇기 때문에 실제 넓이를 가늠하기 가 어렵다.
alternative CSS box model
그래서 사용하는게 border-box인데,,! box-sizing 을 border-box로 지정하면, 실제 box의 width 는 content+ padding*2+border*2 가 된다.
✅ 그래서!! 대부분 box-sizing을 border-box로 지정하고 작업을 한다.
margin collapsing
If you have two elements whose margins touch, and both margins are positive, those margins will combine to become one margin, and its size will be equal to the largest individual margin. If one margin is negative, its value will be subtracted from the total. Where both are negative, the margins will collapse and the smallest (furthest from zero) value will be used.
→ 예를 들어, 위의 margin과 밑에 있는 애의 margin이 서로 닿는다. 그러면 margin이 더 큰 애가 적용된다. 만약 50px, 30px이라면 50px이 적용되기 때문에 밑에 애의 margin이 0이 되어도 전체로 볼 때에는 달라지지 않는 것이다.
box model and inline boxes
<p>안에 <span>을 사용했을때.
→ <span>은 inline이기 때문에 width/height 적용이 안 된다. 다만 margin, padding 등으로 가로로 영향을 미치게 할 수는 있다. 이 때문에, 위 아래로는 다른 element (이 경우에는 p)와 겹치게 되는 현상이 일어날 수 있다.
이 문제를 고치기 위해 span{ display: inline-block}를 해주면, 다른 element에도 영향을 미치며 밀려날 수 있게 된다. width, height적용이 가능해진다. 그러나 완전히 block box처럼 한 줄을 다 차지하게 되는 것은 아니다.
위와 반대로 span의 display를 block으로 해주면 아예 새로운 줄로 적용된다.
display : inline-block을 제일 많이 쓰게 되는 때는 navigation bar 등의 안에 <a>를 넣을 때이다. <a>는 inline의 속성을 가지고 있기 때문에, 그냥 패딩을 적용하면 밖의 <div>박스와 겹쳐지게 된다. 이를 고치기 위해 inline-block으로 처리를 해 주면, 위 아래로 영역이 늘어나 컨테이너 박스 안에 정상적으로 채울 수 있다.
⛔️ BEFORE
🧤 AFTER inline-block
