HTML and CSS Reference
In-Depth Information
Setting Margin and Padding Space in the Box Model
• To set the margin space around an element, use
margin:
length
;
where
length
is the size of the margin using one of the CSS units of measure.
• To set the padding space within an element, use the following:
padding:
length
;
• To set a margin or padding for one side of the box model only, specify the direction
(top, right, bottom, or left). For example, use
margin-right:
length
;
to set the length of the right margin.
• To set multiple margin or padding spaces, specify the values in a space-separated
list starting from the top and moving clockwise around the element. For example,
the style
margin:
top right bottom left
;
sets margins for the top, right, bottom, and left sides of the element, respectively.
• To set matching top and bottom values and matching right and left values for margins
and padding, enter only two values. For example, the style
margin:
vertical horizontal
;
sets margins for the top and bottom sides of the element to the value specified by
vertical
, and sets margins for the right and left sides of the element to the value
specified by
horizontal
.
Each browser's internal style sheet sets the margins around block elements such as
paragraphs and headings. One part of most reset style sheets is a style rule that sets the
default margin size to 0 pixels so the page designer explicitly can defi ne the margins for
all elements.
To define the default margin size:
◗
1.
Return to the
cp_reset.css
style sheet file in your text editor.
◗
2.
Locate the style rule that defines the default page element styles and add the fol-
lowing style property (see Figure 4-26):
margin: 0px;
Figure 4-26
Setting the default margin size for every element
by def
ault, every
element has no margin
◗
3.
Save your changes to the file.