8. box-sizing

 

width와 height 속성은 border(테두리)와 padding을 제외한 content(내용물)의 크기만을 나타냅니다.

그래서 아래 코드를 실행해보면 p1과 p2의 크기가 다릅니다.

#p1 {
	border: 3px solid red;
	width: 400px;
	height: 200px;
	margin-bottom: 100px;
}

#p2 {
	border: 3px solid red;
	width: 400px;
	height: 200px;
	padding: 20px;
}

실행결과

p1의 경우 가로는 406px이고 세로는 206px입니다.

p2는 가로 446px이고 세로는 246px입니다.

결국 가로 400px이고 세로 200px로 만들기 위해서는 border과 padding 속성을 다 계산하고 width, height 속성을 지정해야 하는 복잡한 문제가 생깁니다.

 

box-sizing

이러한 문제는 css3부터 box-sizing 속성을 사용해 해결할 수 있습니다.

box-sizing의 기본값은 content-box인데 이를 border-box로 바꿔 해결할 수 있습니다.

border-box값은 width와 height에 border, padding 의 값을 모두 포함한 길이가 됩니다.

#p1 {
	box-sizing: border-box;
	border: 3px solid red;
	width: 400px;
	height: 200px;
	margin-bottom: 100px;
}

#p2 {
	box-sizing: border-box;
	border: 3px solid red;
	width: 400px;
	height: 200px;
	padding: 20px;
}

실행 결과

그래서 많은 개발자들이 모든 요소에 box-sizing: border-box;를 쓰는 추세라고 합니다.

* {
	box-sizing: border-box;
}

 

 

 

 

 

 

 

---

https://www.instagram.com/p/CbRyCAeLC5t/?utm_source=ig_web_copy_link

부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다.

이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.

---