HTML and CSS Reference
In-Depth Information
Margins can be set using a length, such as
px
or
em
, or a percentage. If you use a percentage, the value is
based on the width of the parent element in the same way as with padding. You can also use the
inherit
keyword
to apply the same margin(s) as the parent element.
An important difference between padding and margins is that you can use negative values for margins. This
means that you can reduce the gap between elements or move an element further to the left—the opposite of
indenting.
The margin properties also accept the keyword
auto
, which tells the browser to calculate the margin
automatically. However, for the browser to be able to do so, the element
must
have a width. The width can be set
either in the HTML (for example, through the
width
attribute of an image) or with the CSS
width
property.
Ti
■
The default CSS value of all margin properties is
0
, but browsers add their own default margins to many
page elements. if you're having difficulty adjusting the gap between elements, the problem might be caused by a
default margin. Some web developers use what's known as a
reset style sheet
to eliminate default margins and
padding. i prefer to change only those values where i need to override the defaults. To learn more about reset style
Understanding How Vertical Margins Collapse
Every element has a top margin and a bottom margin, even if it's set to zero. When block-level elements follow
one another, adjacent vertical margins collapse or overlap each other. The best way to understand this is with a
practical exercise.
exerCise: inspeCting margins and the Box model
All modern browsers have tools that let you inspect CSS and other aspects of a web page. For this exercise,
i'm going to use the developer Tools in google Chrome.
1.
open comparison.html in google Chrome. Right-click the first block of text, and
select
Inspect Element
from the context menu. This opens the developer Tools with
the HTMl for the
padded<div>
selected, as shown in Figure
6-3
.
