The second example shows the
same arrangement of a heading and two paragraphs, but this time
with their borders and background turned on so you can see how
margins create space between them. The third example shows what
happens when the margins are set to zero: The elements then touch
one another.
It??™s good practice to place the following declaration at the top of a
style sheet
* {margin:0; padding:0;}
POSITIONING ELEMENTS 107
FIGURE 4.6 Learning to control
margins around the elements is a key
skill??”it??™s important to realize that
almost every element has margins
by default.
This sets the default margins and padding of all elements to zero
so that you don??™t get confused by which margins and padding the
browser sets and which you set. Once you put this in your style
sheet, all the default margins and padding will disappear. Now you
can add them back to just the elements that you want to have margins
as you style the page. As you will see later, different browsers
apply default padding and margins differently to element sets, such
as forms and lists, and ???neutralizing??? the default settings in this
way, and then adding your own, results in a more consistent crossbrowser
experience.
Often, you will want to mix units when you set margins for text elements,
such as paragraphs. For example, the left and right margins
of a paragraph might be set in pixels so that the text remains a ?¬? xed
distance from a navigation sidebar, but you might set the top and
bottom margins in ems so that the vertical spacing between paragraphs
is relative to the size of the paragraphs??™ text, like this
p {font-size:1em; margin:.
Pages:
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150