[CSS] Box Model (CSS 박스 모델)

Box Model

document의 레이아웃을 계산할 때 브라우저의 렌더링 엔진은 CSS Box Model을 참고로 한다.

모든 HTML요소는 box로 이루어져 있으며, CSS에서 이것으로 요소의 크기와 위치 등을 결정할 수 있다.

이것을 CSS Box Model(CSS 박스 모델)이라고 한다.

박스 모델(box madel)은 요소와 요소 간의 레이아웃을 짜거나 크기와 위치 등을 정할 때 중요하게 작용하며,

content, padding, border, margin으로 이루어져 있다.

 

 

content

텍스트나 이미지 등의 실질적인 콘텐츠가 표시되는 영역이다.

box-sizing 속성의 값이 기본값인 content-box이며 요소가 블록 레벨 요소인 경우

크기를 width와 height와 같은 속성을 사용하여 설정할 수 있다.

 

padding

content와 border사이의 여백을 padding이라 한다.

padding 또는 padding-top, padding-bottom, padding-right, padding-left 속성을 사용하여 설정할 수 있다.

padding은 단축 속성으로 padding-top, padding-bottom, padding-right, padding-left 속성을 포함한다.

 

padding: 10px  /* 사방 10xp */
padding: 10px 20px  /* 상하 10px, 좌우 20px */
padding: 10px 20px 15px  /* 상 10px, 좌우 20px, 하 15px */
padding: 10px 20px 30px 15px  /* 상 10px, 우 20px, 하 30px, 좌 15px */

 

border

content와 padding을 둘러싼 테두리이다.

테두리의 크기와 스타일은 border 관련 속성을 사용하여 설정할 수 있다.

box-sizing 속성의 값이 border-box라면

테두리 영역의 크기를 width, height와 같은 속성을 사용하여 설정할 수 있다.

border는 단축 속성으로 border-color, border-style, border-width 속성을 포함한다.

 

border:1px solid gray

 

margin

테두리(border)와 다른 요소 사이의 여백이다.

margin 또는 margin-top, margin-bottom, margin-right, margin-left 속성을 사용하여 설정할 수 있다.

margin은 단축 속성으로 margin-top, margin-bottom, margin-right, margin-left 속성을 포함한다.

 

margin: 10px  /* 사방 10xp */
margin: 10px 20px  /* 상하 10px, 좌우 20px */
margin: 10px 20px 15px  /* 상 10px, 좌우 20px, 하 15px */
margin: 10px 20px 30px 15px  /* 상 10px, 우 20px, 하 30px, 좌 15px */

 

 

margin은 요소의 주변에 여백공간을 추가하고, padding은 요소 내부에 여백 공간을 만든다.