2022-10-21 box-sizing[새싹 프론트엔드]

Di it  한권으로 끝내는 웹표준의 정석

 

box-sizing: border-box 란?

- 요소의 적용된 padding, border 를 내가 정한 width와 height에 포함유무를 정해주는 속성 (margin은 바깥여백이므로 box크기에 영향받지않는다.)

예를들어 width,height가 100px인 박스 모델을 만들고 싶고 border: 10px, padding: 10px을 주고싶다고 가정할때

해당 박스모델의 크기는 100px이 아니라 140px이 된다 왜냐하면 border와 padding값이 width, height값에 포함이 되었기 때문이다 .

이것이 박스모델의 기본적인 속성이다.

이때 border와 padding을 포함한 100px의 박스모델을 만들고 싶을때 사용하는 속성이

box-sizing: border-box이다.

속성	값	비고
box-sizing	border-box	border,padding 포함
	content-box (기본값)	border,padding 미포함 , 박스모델의 크기가 내가 지정한것 보다 커진다

 

 

border-box 적용(좌) content-box 적용 (우) - 기본값

---

box-sizing속성을 쓰지않는다면 어떻게 계산되어 보여질까?

- padding, border는 양쪽에 적용이 되기때문에 10px의 padding이 적용되었다면 해당 박스모델에는

총 20px의 padding이 적용되어있는 상태이다.

width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 5px;
= width 130px, height 130px 네모 박스가 된다.

 

새싹 DT 기업연계형 프론트엔드 실무 프로젝트  1주차 블로그 포스팅