HTML box model

 

 

 

박스 모델(box model)
모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 칭한다.
박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분한다.

 

1. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분.

2. 패딩(padding) : 내용과 테두리 사이의 간격. 패딩은 눈에 보이지 않는다.

3. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리.

4. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격. 마진은 눈에 보이지 않는다.

 

 

HTML 요소의 높이와 너비 구하기

 

 

HTML 요소의 전체 너비(width)를 계산하는 공식

width + left padding + right padding + left border + right border + left margin + right margin

 

HTML 요소의 전체 높이(height)를 계산하는 공식

height + top padding + bottom padding + top border + bottom border + top margin + bottom margin