![thumbnail](/static/e0af803def08581d92418c30ddf04c0a/b1abc/220927_css-thumbnail.png)
Box Model이란?
![Box model](220927_box-model.png)
브라우저의 렌더링 엔진은 HTML 요소를 나타낼 때 CSS Box Model에 맞춰 그려낸다. 박스 모델은 4가지 영역인 margin, border, padding, content로 구분된다.
content
내용을 표시하는 영역으로, width
와 height
로 크기를 조정할 수 있다.
.box {
width: 250px;
height: 100px;
}
![content content](/static/c1957feb2877d66eb6a9dc6cc4565ea7/dface/220927_content.png)
padding
content 주위의 공백을 뜻하며, padding
속성으로 지정할 수 있다.
.box {
width: 250px;
height: 100px;
padding: 50px;
}
![padding padding](/static/683b7a982408c19caace22b453ca488c/dface/220927_padding.png)
border
content와 padding을 포함하는 영역의 테두리를 지정한다. border
속성을 이용하면 된다.
.box {
width: 250px;
height: 100px;
padding: 50px;
border: 1px solid #000;
}
![border border](/static/82514aed5b46efaa9a99e2d230c09764/dface/220927_border.png)
margin
content, padding, border를 포함한 전체 요소 주위의 공백을 뜻하며, margin
속성으로 지정할 수 있다.
.box {
width: 250px;
height: 100px;
margin: 50px;
padding: 50px;
border: 1px solid #000;
}
![margin margin](/static/2970338fcb75092fca1f11e0c95a6e0b/dface/220927_margin.png)
box-sizing
박스 모델은 box-sizing
이라는 속성으로 요소의 너비와 높이를 계산하는 방식을 지정할 수 있다. 두 가지 값을 가질 수 있는데, 아래와 같다.
content-box
(default): content 영역만을 기준으로 계산된다.border-box
: padding, border, content 영역을 합한 영역을 기준으로 계산된다.
content-box
content-box
일 경우 width
에 250px 값을 주면 content 영역의 너비만 250px이 되며 padding
과 border
는 별개로 계산된다.
.box {
box-sizing: content-box;
width: 250px;
height: 100px;
margin: 20px;
padding: 10px;
border: 2px solid #000;
}
![content-box content-box](/static/b13afd278d9813ddc8696666f3d18372/dface/220927_content-box.png)
border-box
반면에 border-box
일 경우 width
에 250px 값을 주면 content, padding, border 영역의 너비를 모두 합한 값이 250px이 된다. padding
이 10px, border
가 2px이면 content 영역의 너비는 양쪽 padding, border 값을 제외한 226px이 된다.
.box {
box-sizing: border-box;
width: 250px;
height: 100px;
margin: 20px;
padding: 10px;
border: 2px solid #000;
}
![border-box border-box](/static/34ed681fcb753dbbe08b7af891560a00/dface/220927_border-box.png)
References
Table Of Contents