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.
Search WWH ::




Custom Search