[CSS] Box Model (Content, Padding, Border, Magin)

Box Model이란 ?

HTML element가 웹 페이지에서 차지하는 공간입니다.

 

키보드의 F12를 누르게되면 개발자 도구를 펼칠 수 가 있는데,

가령 Google에 접속하여 로고 공간에 대해서 생각을 해보겠습니다.

 

아래와 같은 영역을 선택하여

Element -> "Computed"로 진입하면  네모박스 형태의 CSS를 볼 수 있습니다.

 

Computed탭을 자세히 보겠습니다.

Google 로고인 box는 파란색 공간(Content)으로 width : 272, height : 92로 구성 되어있습니다.

 

 

Google 밑에 있는 키보드 모양의 박스를 살펴보겠습니다.

 

아래의 CSS표기처럼,

 

1) div태그의 Umvnrc className의 파란색공간(Content)은 23.993 px * 43.993 px의 크기라면,

 

2) 옆의 초록색 공간(Padding)은 Content와 Border 사이의 여백을 의미하며, 사이의 여백이 왼쪽 8px, 오른쪽 8px씩 차지한다고 이해하시면 됩니다.

 

3) 여기서 Border란, Content를 감쌀수 있는 테두리 선 이라고 이해하시면 됩니다.

 

4) Margin은 Border로 감싼부분의 바깥쪽 여백을 의미합니다.

 

 

 

[출처]

CSS Box Model이란?