HTML and CSS Reference
In-Depth Information
Example 3:
div {
margin: 0;
padding: 75px;
border: 1px solid #999;
background: #ccc;
}
div div {
margin: 25px;
padding: 40px;
border: 10px solid #fff;
background: #fff;
}
Which element is best to style in a given situation can often be deter-
mined by evaluating the context and content needs. It will usually be
obvious which element to use because you'll want to reserve one of
the other elements or properties for other things, or you know that
the style will be reused and should be applied to a container or other
reused element.
Gutters surrounding text and other content are often best created by
setting padding on the outer element. This will ensure the gutters are
set to a consistent size regardless of the content within the container.
It is more flexible and more easily maintained than the alternative of
setting the left and right margin or padding on any possible child of
that container.
In the next section, you'll see how using the box properties of a unique
child element might be more practical.
