Tutorials Tonight's Logo
Follow Us

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

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.


Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.