13. box model _ contents의 크기 계산

box model이란 간단히 말하면 box의 크기를 계산하는 방법입니다.
사람에 비유하자면 내 키와 뚠띠정도에 옷 두께, 깔창 등등
모든걸 다 합한 후 내 부피가 얼만한가에 관한 것입니다.

크기에 영향을 주는 요소로는 width, height, padding, margin, border가 있습니다.
이 모든 요소를 다 더하면 이 컨텐츠의 크기가 나옵니다.

위에 컨텐츠의 box model을 계산해 봅시다.
먼저 가로를 계산합니다. width 값이 300px, padding이 왼쪽 오른쪽 각각 30px씩이니 +60px 입니다.
거기에 border가 왼쪽 오른쪽 3px씩 해서 +6px, margin이 30px씩 +60px입니다.

width = 300px + (30px+30px) + (3px+3px) + (30px+30px) = 426px

height값도 같은 방법으로 계산합니다.

height = 150px + (30px+30px) + (3px+3px) + (30px+30px) = 276px

이것은 표준식의 경우이고 예외도 있습니다. IE의 구버전에서는 box model을 받아들이는 방식이 다르기 때문에
다른 브라우저나 높은 버전의 IE와는 다른 형태로 출력됩니다. 어쨌건 지금은 패스

margin, padding, border가 미치는 영향

margin, padding, border가 box model에 영향을 주는 것을 살펴봅시다.
width와 height가 같은 상황에서 padding과 margin과 border에 따라 컨텐츠의 크기가 변하는 것을 살펴봅시다.

<div class="margin"><p class="box">마진 줌</p></div>
<div class="padding"><p class="box">패딩 줌</p></div>
<div class="border"><p class="box">보더 줌</p></div>
 

CSS

<style>
  .box {width:100px;height:100px;text-align:center;line-height:100px;background:tomato;}
  .margin {width:100px;height:100px;margin:10px;background:springgreen;}
  .padding {width:100px;height:100px;padding:20px;background:springgreen;}
  .border {width:100px;height:100px;border:5px solid springgreen;}
</style>
 

마진 줌

패딩 줌

보더 줌

* 개인적인 공부를 정리하는 블로그입니다.