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