CSS basics - HTML5 and CSS3 - page 484

The box model
The CSS box model defines the dimensions of elements as they're laid
out on the page. In order to do page layout with CSS , as covered in the
next section, it's important to know how elements are sized.

Elements have a width and
height, padding, a border, and a
margin. The diagram at left
shows how they fit together.

The element's width is either
defined explicitly or determined
automatically by the browser
based on the content and display mode. Between the content and the
border is the padding; then you have the border (discussed in the pre-
vious section), and finally the margin, which is the space between this
element and the next one.
The padding, border, and margin have associated collections of proper-
ties in CSS . The width of each side can be applied separately, or you can
use shorthand syntax. In the previous section, you saw the border-width:
5px; shorthand. This could also be written in either of these two ways:

border-width: 5px 5px 5px 5px; border-top-width: 5px;

border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 5px;

There are equivalent properties for the padding and margin:

padding-width: 5px 5px 5px 5px; padding-top-width: 5px;

padding-right-width: 5px;
padding-bottom-width: 5px;
padding-left-width: 5px;

margin-width: 5px 5px 5px 5px; margin-top-width: 5px;

margin-right-width: 5px;
margin-bottom-width: 5px;
margin-left-width: 5px;