CSS Box Model

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

 

css 박스 모델

 

html의 모든 요소는 box 로서 고려되어질 수 있다. box 모델의 용어는 디자인과 레이아웃에 대해서 이야기 할때, 사용되어진다.

 

css box 모델은 html 요소의 주변을 둘러싸는 필수적인 상자이다.

이것은 margin, 경계선, 패딩, 그리고 실제 컨텐츠로서 구성되어진다.

아래의 이미지를 box model을 그린다.

box model

 

Width and Height of an Element

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

 

요소의 넓이와 높이

모든 브라우저에서 요소의 넓이와 높이를 정확하게 설정하기 위해선 너는 box 모델이 어덯게 작동하는지 알아야 할 필요가 있다.

 

 

 

 

Here is the calculation:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

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