box-sizing에 대해 알아보자

특징

• box-sizing은 요소의 크기를 계산하는 기준을 지정한다
• 기본값: content-box
• 옵션: content-box, border-box

content-box vs border-box

• 요소의 내용(content)로만 크기를 계산
• 요소의 content + padding + margin을 모두 더해 크기 계산

.parent { 
  box-sizing: content-box;
  width: 100%;
  border: solid #5B6DCD 10px;
  padding: 5px;
}
.child {
  box-sizing: border-box;
  width: 100%;
  border: solid #5B6DCD 10px;
  padding: 5px;
}

Quiz

1.다음 CSS의 실제 가로 너비는?

.div {
	width: 100px;
    padding: 20px;
    border: 1px solid red;
}

정답: 100px? vs 142px!

2.다음 CSS의 실제 가로 너비는?

.div {
	width: 100px;
    padding: 20px;
    border: 1px solid red;
    box-sizing: border-box;
}

정답: 100px! vs 142px?