Box Model
Box Model은 HTML 엘리먼트를 감싸고 있는 (이루고 있는) 박스이다.
F12키를 누르면 볼 수 있는 이 사각형이 바로 Box Model.
Box Model은 content, padding, border, margin으로 이루어져 있다.
Parts of a box
- Content box: 박스의 내용. 텍스트나 이미지가 이곳에 나타난다.
- Padding box: content 주변의 여백.
- Border box: padding과 content를 감싸는 박스이다.
- Margin box: content, padding, border를 감싸고 다른 엘리먼트들과의 여백을 만들어준다.
Types of boxes
- outer display type
-block: 한 줄에 하나만. (ex.<h1>,<p>)
-inline: 한 줄에 여러 개 가능. width와 height는 적용되지 않는다. (ex.<a>,<span>) - inner display type
내부 요소가 배치되는 방식을 결정한다.
예를 들어display: flex로 내부 배치 방식을 변경할 수 있다.
width
Box Model에서 width 속성은 순수하게 content 영역의 너비만을 포함한다.
실제 엘리먼트가 화면에서 차지하는 너비를 생각할 때는 padding, border까지 고려해야 한다. ➡ 이 작업을 편히 하기 위해 box-sizing 속성을 사용한다.
box-sizing
- content-box:
box-sizing속성의 기본값.width속성값이 content의 너비만 포함하게 한다. - border-box:
width속성값이 content, padding, border까지 포함하게 한다.
참고
