CSS box model

The Box model is the foundation of CSS web design. At the very core of this idea is that every element is in a “box”. For example when you use the h3 tag the whole element is in a box, same with the anchor tag and so on. But the real value of the box model is that everything can be positioned using three basic properties. Padding, border, and margin. First lets take a graphic model of these three properties.


As you can see that the margin is the most outer layer of the model. Then comes the border followed by padding and finally the content it self. The height and width of the content can also be manipulated like older styles of XHTML. You can also set individual sides such as margin-left or padding-right. Manipulating these properties sets the total width and height of the element.

calculate total width:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin

Calculate total height:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin