CSS Reference
/* Different vertical and horizontal borders: */
border-width: .2em .1em .2em .1em;
border-width: .2em .1em; /* The same as the previous line. */
D.6 Spacing
These properties control the space around and inside an element.
margin
The margin CSS property defines the amount of empty space between the element’s
border and the margin of a neighboring element. You can also assign a different
amount to each of the four margins by specifying a space-delimited list of values
in the following order: top, right, bottom, and left. If you list two values, then the
first will be used for the top and bottom margins, and the second for the left and right
margins.
Note that in some situations vertical margins can collapse, leaving a sma ller gap be-
tween elem ents than anticipated. You can read about collapsing margins on page 79.
Values
Positive or negative <length> or <percen ta ge> values can be used. If percenta ges are
used, th ey are relative to the width of the c ontaining block.
A specia l keyword auto can be used, which is replaced by the browser with some
convenient value. It can be used, for example, for centering block elements. The next
CSS rule w ill center <div> elements horizontally:
div {
width: 50%;
margin: 0 auto;
}
Default Value
0
Examples
/* Set all the margins to 10 px: */
margin: 10px;
/* Set top, right, bottom, and left margins individually: */
margin: 1em 0.5em 2em 0.5em;
D.6. Spacing 355
margin-top, margin-right, margin-bottom, margin-left
These properties act just like the margin property, only that each sets the margin for
its own edge.
Example
margin-bottom: 20px;
padding
The pa dding CSS prop erty specifies the a mount of empty space be tween the ele-
ment’s c ontent (e.g., an image or block of text) and its border. You can also assign a
different amount to each of th e four paddings by specifying a space-delimited list of
values in the following order: top, right, bottom, and left. If you list two values, then
the first will be used for the top and bottom paddings, and the second for the left and
right paddings.
Values
Nonnegative <length> or <percentage> values can be used. If pe rcentages are used,
they are relative to the width of the co ntaining block.
Default Value
0
Examples
/* Set all the paddings to 10 px: */
padding: 10px;
/* Set top, right, bottom, and left paddings individually: */
padding: 1em 0.5em 2em 0.5em;
padding-top, padding-right, padding-bottom,
padding-left
These properties act just like the padding property, only that each sets the pad ding
for its own edge.
Example
padding-top: 5px;
356 CSS Reference
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.