[CSS] box-sizing 속성

[CSS] box-sizing 속성

---

✔️ box-sizing

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

 

📓 content-box

.box {
	width: 400px; height: 100px;
	padding: 20px; margin: 30px;
	border: 10px dotted gray;
	text-align: center;
}

.content-box {
	box-sizing: content-box;
}

<!-- 총 너비 : width + padding 좌, 우 + margin 좌, 우 + border 좌, 우 -->
<!-- 총 너비 : 400 + 20 + 20 + 30 + 30 + 10 + 10 -->
<!-- 내용 폭 : width(400) -->

💡 box 의 width 는 오로지, 내용폭만 400px 를 갖는다. 패딩, 마진, 테두리 값을 다 더해야 전체 너비값이 나옴.

 

 

📓 border-box

.box {
	width: 400px; height: 100px;
	padding: 20px; margin: 30px;
	border: 10px dotted gray;
	text-align: center;
}

.border-box {
	box-sizing: border-box;
}

<!-- 총 너비 : width(padding과 border 포함) + margin 좌, 우 -->
<!-- 총 너비 : 400 + 30 + 30 -->
<!-- 내용 폭 : width(400) - padding 좌, 우(40) - border 좌, 우(20) = 340 -->