[html/css] 박스 모델 이해하기

 

 

[html/css] 박스 모델 이해하기

 

부제: margin, padding, border 차이

 

 

박스 모델(box model) 역시 초반에 다루었어야할 주제인데, 어렵게 느껴지는 부분이 있어ㅠ.ㅠ

 

차일피일 미루다 아주 단순하게 설명해 보기로 했어요.

 

 

HTML 요소는 박스로 이루어져 있습니다. 

 

div나 표 뿐만 아니라, 글자나 이미지 등 모든 요소가 보이지 않는 박스로 이루어져 있습니다.

 

 

각 박스는 내용 영역이 있고(content area)

 

내용 영역 주위로, padding, border, margin 이 감싸고 있는 형태입니다.

 

 

 

그림 출처: http://www.w3.org/TR/css3-box/#block-level0

 

용어 설명

 

content: 내용을 담는 공간

padding: 내용과 테두리 (border) 사이의 여백

border: 테두리 선

margin: border 바깥 여백

 

content edge: content 영역 바깥 경계선을  content edge(내용 가장자리)라고 부릅니다

padding edge:  padding 영역 바깥 경계선을 padding edge라 부릅니다.

border edge: border 영역 바깥 경계선이 border edge입니다.

margin edge:  margin 영역 바깥 경계선이  margin edge입니다.

(padding, border와 바르게 margin은 음수값이 가능함)

 

실제 자주 사용되는 용어는 padding, border, margin 이므로 이 세 가지 용어만 잘 숙지해 두시면 됩니다~

 

 

 

어떤 요소의 너비와 높이를 계산할 때 width, height 속성을 쓰는데

 

여기서 width, height 속성은 content 영역만의 너비와 높이를 규정합니다.

 

 

요소의 전체 너비, 높이는 어떻게 계산할까요?

 

 

요소 전체 너비 계산식: width(내용 영역 너비) +  padding(좌+우) +  border(좌+우) + margin(좌+우)
요소 전체 높이 계산식: height(내용 영역 높이) +  padding(상+하) +  border(상+하) + margin(상+하)

 

 

▶사용 예

 

div{

width: 200px;

height: 300px;

padding: 10px;

border: 2px solid black;

margin: 10px;

}

 

 

 

전체 너비: 200 + 10 + 10 + 2 + 2 + 10 + 10 = 244px

전체 높이: 300 + 10 + 10 + 2 + 2 + 10 + 10 = 344px

 

 

▶ 주의

 

IE8과 이전 버전은 width 속성 안에 padding, border가 포함 되어 있습니다.

이 문제를 해결하기 위해, DOCTYPE 선언해야 하고요.

 

 

 

 

 

아래 글도 꼭 참조해 주세요~

 

비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE

 

 

padding, border, margin 설정 방법은 아래 글 참조해 주세요~

 

 

 

border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법)

 

margin 속성 자세히 알아 보기(margin-top,margin-left, margin-bottom, margin-left 설정 방법)

 

padding 속성 사용법(padding-right, padding-left, padding-top, padding-bottom)