HTML and CSS Reference
In-Depth Information
In this code, the padding is set to 25 px. With only a single value specified, it is assumed
that this value is applied to all four sides of the box. However, the padding can be specified as
different values for all four sides. The above code is in effect the same as saying:
padding: 25px 25px 25px 25px;
or
padding-top: 25px;
padding-bottom: 25px;
padding-left: 25px;
padding-right: 25px;
The next area where you can create spacing for your HTML elements is in the margin.
The margin is the space between the border of your element and the surrounding elements.
The browser provides a default margin based on the HTML element that is used. Figure
4-14 shows the default margin for the paragraph element. Figure 4-15 shows the effect of
increasing the size of the margin. The margin can be controlled in exactly the same ways as
the padding. You can specify a single value to be applied equally to all four sides, specify
individual values in a single line, or specify each side of the box individually. The following
code demonstrates increasing the margin of the paragraph element and the results are shown
in Figure 4-15:
p {
border-top: 15px solid black;
border-left: 10px solid black;
border-right: 10px solid black;
border-bottom: 5px solid black;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 25px;
padding-right: 25px;
margin: 40px;
}
FIGURE 4-14
The layout of two paragraphs with their default margins
Search WWH ::
Custom Search