HTML and CSS Reference
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
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
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.
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 .