CSS box model

모든 HTML 요소들은 박스로 생각할 수 있다. 박스 모델은 디자인과 레이아웃에 대해 말할 때 쓰인다.

CSS 박스 모델은 본질적으로 모든 HTML 요소를 감싸는 박스다. margin, border, padding, 실제 컨텐츠로 구성되어 있다.

margin : border 바깥의 영역, 마진은 투명하다.

border : 패딩과 content를 둘러싼다.

padding : content 주변 영역, 패딩은 투명하다.

content : text, image가 나타나는 곳

요소의 너비와 높이

요소의 너비와 높이 속성을 설정하고 싶다면, 단지 content 영역의 너비와 높이를 설정하면 된다.

요소의 전체 크기를 계산하기 위해서는 패딩, 테두리, 마진을 다 합쳐야 한다.

width: 320px;

padding: 10px;
border: 5px solid gray;
margin: 0; 

너비 계산을 위해서 왼쪽 오른쪽 패딩과 가장자리를 더한다. 320+(10+5)*2 = 350

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

https://www.w3schools.com/css/css_boxmodel.asp