특정 영역에 컨텐츠를 놓고 사이즈를 지정할때 padding이나 border가 포함된 width값을 지정하느냐 아님 제외한 지정하느냐가 고민 이다.
이때 정확한 값을 위해 box-sizing이 쓰이게 되는데
content-box일때
width는 padding,border크기를 포함하지 않는다
border-box일때
width는 padding,border크기를 포함한다
예를들어
div
{
width:300px;
height:100px;
border:50px solid #ff0000;
min-width:100px;
min-height:100px;
margin:10px;
}
라고 가정할때
"margin:10px; 밑줄에 box-sizing:content-box"를 입력하면
"margin:10px; 밑줄에 box-sizing:border-box"를 입력하면
위에 그림 처럼 나오게 된다
