[CSS] Box Model

CSS Syntax

- selector {poperty: value; property: value;}

          ex) h1 {color: blue; font-size: 12px;}

 

- 모든 HTML elements 들은 사각형 상자 모양(CSS box model)으로 구성된다.

- box model 구성 요소

• Content 
• Padding : cotent와 border 사이 간격, 투명임
• Border 
• Margin : 다른 element와의 간격

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

element 의 '전체 width / height' 구하는 공식

• element 의 전체 width =
  • width(content의) + left padding + right padding + left border + right border + left margin + right margin
• element 의 전체 height =
  • height(content의) + top padding + bottom padding + top border + bottom border + top margin + bottom margin

 

 

Reference : 

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