텍스트# CSS 크기 계산, box-sizing
요소의 크기 계산 기준을 지정
기본값, content-box
: 요소의 내용(content)으로 크기 계산
border-box
: 요소의 내용 + padding + border로 크기 계산
<div class="item"></div>
<div class="item"></div>
border 와 padding으로 인해서 요소의 크기가 128 *128 로 커짐!
.item {
width: 100px;
height: 100px;
background-color: orange;
}
.item:first-child {
border: 4px solid red;
padding: 10px;
/*border 와 padding으로 인해서 요소의 크기가 128 *128 로 커짐!*/
}
box-sizing을 사용하여 요소에 지정한 사이즈대로 출력 가능!
.item {
width: 100px;
height: 100px;
background-color: orange;
}
.item:first-child {
border: 4px solid red;
padding: 10px;
box-sizing: border-box;
}