HTML and CSS Reference
In-Depth Information
Setting Margins and Padding
You and Dan are continuing to work on the page layout for the Cycle Pathology home
page. One layout principle suggests that the page should be divided into thirds with dif-
ferent page content placed in each of the three sections. You'll apply this general prin-
ciple to the Cycle Pathology page (see Figure 4-25).
Figure 4-25
Page layout percentages
Cycle
Pathology
HOME
MEMBERS ONLY
MARKET PLACE
MESSAGE BOARD
CONTACT INFO
About Cycle Pathology
From the President's Desk
—Dan Atwood
Upcoming Events
Riding the Rim
—Kathy Rawlings
Cycle Pathology 100 Redstone Drive ￿ Grand Junction, CO 81501 ￿ (970) 555-8944
33%
66%
Based on the proposed layout for the page, you'll shift the horizontal navigation list
and the president's message at the top of the page to the right, into the middle page
section. One way to shift these two items is to change the margin space around those
elements.
Margin Styles
Recall from Figure 4-4 in the last session that CSS uses the box model to format the
space around element content. On the very outside of the box is the margin, separat-
ing one element from another. CSS supports several styles to set the size of this margin,
including the properties
margin-top: length ;
margin-right: length ;
margin-bottom: length ;
margin-left: length ;
 
Search WWH ::




Custom Search