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

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;
}