1. box-sizing

box-sizing 속성은 박스의 크기에 대한 기준을 정합니다.

box-sizing이 content-box일 때,

.box {
	box-sizing: content-box;
	width: 300px;
	height: 200px; 
	padding: 20px;
	border: 5px solid black;
	margin: 15px;
}

box-sizing: content-box (기본값). 박스의 크기를 컨텐츠의 크기만큼 설정합니다.

width: 300px; height: 200px; padding: 20px; border: 5px; soild black; margin: 15px;

제주코딩베이스캠프

제주코딩베이스캠프

box-sizing이 border-box일 때,

.box {
	box-sizing: border-box
	/* border까지 width에 포함 */
	width: 300px;
	height: 200px; 
	padding: 20px;
	border: 5px solid black;
	margin: 15px;
}

box-sizing: border-box. 박스의 크기를 컨텐츠의 border 값 만큼 설정합니다.

width: 300px; height: 200px; padding: 20px; border: 5px; soild black; margin: 15px;

제주코딩베이스캠프

제주코딩베이스캠프