[CSS 007] Box-sizing - 박스에 적용된 사이즈의 기준 정하기

 

 

Box-sizing

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다.

 

 

content-box

box-sizing: content-box;
width: 100px;
padding: 10px;

✔ 요소 사이즈에 패딩과 테두리 포함x

✔ 콘텐츠만 100px로 최종 너비는 120px(100px+10px+10px)이 된다.

❗❗ 생각했던 요소의 크기 + (  )

 

 

border-box

box-sizing: border-box;
width: 100px;
padding: 10px;

✔ 요소 사이즈에 패딩과 테두리 포함o

✔ 테두리와 패딩까지 합해서 최종 너비 100px

 

 

 

---

 

기본값은 내용이 차지하는 영역에만 사이즈가 적용되는 content-box로

생각했던 크기보다 최종 크기가 커지게 하지 않기 위해 box-sizing 속성을 border-box로 지정해주는게 좋다.

Univeral Selector(전체 선택자)를 이용하여 모든 태그에 적용해주자!!

*{
     box-sizing: border-box;
}