CSS box model is a way of style HTML element. Each HTML element is a rectangle box with border, margin, padding and content.
The following code shows the layout of the each parts in an element. The outer most is margin, then the element border, after that is the padding, the content is the core and inner most.
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin;
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin;
The following code sets the width of a div element to be 250px. The padding is 25px.
div { width: 250px; padding: 25px; border: 25px solid navy; margin: 25px; }