[CSS] - Box Model

박스 모델(box model)

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

• content : 텍스트와 이미지가 들어가는 내용 부분이다.
• padding : 내용과 테두리 사이의 간격이다.
• border : 내용과 패딩 주변을 감싸는 테두리이다.
• margin : 테두리와 주변 요소간의 간격이다.
  -> padding과 margin은 눈에 보이지 않는다.

height와 width의 이해

1. css에서 height width 속성을 설정할 때 그 크기가 가르키는 부분은 내용 부분만을 대상으로 한다.
2. html 요소의 height, width속성으로 padding, border, margin의 크기는 포함되지 않는다.

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

1. html 요소의 전체 너비(width)를 계산하는 공식은
   width + left padding + right padding + left border + right border + left margin + right margin

2. html 요소의 전체 높이(width)를 계산하는 공식은
   height + top padding + bottom padding + top border + bottom border + top margin + bottom margin