CSS 박스모델

CSS 박스 모델

box-sizing

• context-box: 기본 값 (default)
• border-box

 

box-sizing : context-box

padding 값을 부여했을 때 박스 자체의 크기가 커지지만, 컨텐츠의 크기는 유지된다

 

 

box-sizing : border-box

padding 값을 부여해도 박스 자체의 크기는 유지가 되며 컨텐츠의 넓이가 작아진다.

 

 

화면 레이아웃을 잡을 때 border-box 로 하는 것이 편하다.

content-box 의 장점은 position:relatvie, absolute 로 하여, 컨첸츠의 위치를 더욱 유동적으로 위치시킬 수 있다는 장점이 있다고 한다.

 

Ref:

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

box-sizing