📣 링크

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

✏ padding 값 없는 기본 box

.box {
        width: 100px;
        height: 100px;
        background-color: red;
      }

<h3>Box without padding</h3>
    <div class="box box1"></div>

✏ 기본값 - inner 포함

.box {
        width: 100px;
        height: 100px;
        background-color: red;
      }

<h3>Box without padding</h3>
    <div class="box box1">
			<div class="inner"></div>
		</div>

✏ box-sizing: content-box → 기본값

.box {
        width: 100px;
        height: 100px;
        background-color: red;
      }
.box2 {
        box-sizing: content-box; 
				padding: 20px;
        border: 10px solid black;
      }

<h3>Box without padding</h3>
    <div class="box box2">
			<div class="inner"></div>
		</div>

padding과 border에 영향을 받지 않고 지정한 너비가 곧 contents의 너비가 된다.

✏ box-sizing: border-box