3-2 box-sizing

요소의 너비와 높이를 계산하는 방법을 지정 Morden Box

<style>
  div {
    width: 100px; height: 100px;
    padding: 10px;
    border: 10px solid #000;
    display: inline-block;
  }
</style>
<body>
  <div style="background:red"></div>
  <div style="background:blue;box-sizing:border-box"></div>
</body>

CSS 의 content-box 가 box-sizing 의 default 이다.

1. `box-sizing:border-box`#

<style>
    div {
        width: 100px; height: 100px;
        display: inline-block;
    }
</style>
<body>
<!--컨텐츠의 크기를 보존하고 싶을 때-->
<div style="background:red"></div> 
 
<div style="background:blue;box-sizing:border-box"></div>
</body>

inline-block 사이의 space
일반적으로 inline-block 요소 사이에 공백이 존재한다.
단어 사이의 공백과 같다.
공백을 없애는 방법
<div style="background:red">
</div><div style="background:blue;box-sizing:border-box"></div>