CSS BOX MODEL

❮ Prev Next ❯

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

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.

❮ Prev Next ❯