tutorialstonight logo
A Platform To Learn To Code

CSS BOX MODEL



Every HTML element can be compared with a box. Treating HTML elements as box we can visualise an element having following property:

  • Content
  • Padding
  • Border
  • Margin
  • Height
  • Width

Margin Of The Box

Border Of The Box

Padding Of The Box

CONTENT


Effective Height and width of element

From the above figure you can see that effective height and width of the content are :

  • Total height = margin-top + margin-bottom + border-top + border-bottom + padding-top + padding-bottom + height
  • Total width = margin-left + margin-right + border-left + border-right + padding-left + padding-right + width

Example

Run the code