Content-box vs Border-box (CSS box-sizing)

CSS box-sizing 속성

CSS에는 box-sizing이라는 속성이 있다.

box-sizing : CSS의 테두리 영역의 크기를 결정함. 속성값으로는 content-box와 border-box가 있다.

 

box-sizing의 속성값인 content-box와 border-box를 간단하게 알아봅시다.

 

그 전에 이해하고 넘어가야 할 것이 CSS Box Model이다.

CSS는 HTML을 꾸미는 (마크업 언어가 실제 표시되는 방법을 기술하는) 스타일 언어이다. 

HTML을 꾸민다는 것은 HTML 각 태그의 영역에 스타일을 입힌다는 것이고, 이러한 HTML의 태그 영역안 element 들은

박스 영역으로 구분된다.

 

즉, CSS box model은 모든 HTML element를 감싸는 박스를 말한다. 이 박스는 margin, border, padding 그리고 content로 구성되어 있다. 

• Content - 박스의 콘텐츠이며 텍스트 또는 이미지를 가르킨다.
• Padding - border영역과 콘텐츠 사이의 영역.
• Border - padding과 content를 감싸는 영역.
• Margin - border를 감싸는 영역.

여기서 html 태그에 width와 height를 지정할 때, padding, margin 그리고 border영역이 content 영역에 영향을 미치지 않으면

content-box 속성값이고 영향을 미친다면 border-box 속성값이다.

 

content-box

• 컨텐츠 크기 = content-box(width or height)
• 전체 크기 = content-box + border + padding + margin

border-box

• 컨텐츠 크기 = border-box(width or height) – border – padding – margin
• 전체 크기 = border-box

보통은 프로그래머가 설정한 width와 height로 태그의 크기가 예상되는 것을 원하기 때문에 

border-box 속성을 많이 쓴다.