[CSS] box-sizing

Box Model

좌) box-sizing : border-box, 우) box-sizing : content-box 

우측의 content-box가 default 값이지만, 보통은 border-box로 스타일을 잡는다.

 

content-box로 지정할 경우, 테두리 두께 등으로 원하는 크기를 찾기 어렵고, 후에 디자이너 요청으로 수정하는 데 어려움이 있다.

div {
	width : 100px;
	height : 100px;
	background-color : blue;
}

 

디자이너 : 여기에서 박스 크기는 그대로 하고, 가운데 텍스트를 기준으로 padding을 20px 넣어 주세요 !

div {
	padding : 20px;
	width : 100px;
	height : 100px;
	background-color : blue;
}

 

코드를 수정하면, 박스의 크기가 100px이 아닌 것을 확인할 수 있다. 이 경우, 박스의 크기는 그대로 두면서 padding을 주기 위해서는 일일히 계산해서 값을 바꿔줘야 한다. 하지만 매번 계산할 수 없으므로 border-box로 지정해서 주로 사용한다.

 

Reference

https://www.w3schools.com/css/css_boxmodel.asp