Tutorials Tonight's Logo

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

div{
    margin:15px;
    border: 5px solid silver;
    padding: 20px;
    height: 50px;
    width: 300px;
}
▶ Run the code

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.