Margins, Padding, and Lists

By default, all visual browsers will apply a 50-pixel margin to the left edge of a list.

This allows room for the list item markers (bullets in the case of a bulleted list;

numbers in the case of an ordered list). Unfortunately, the CSS Specification
doesn’t say explicitly whether this space should be implemented as left margin
or left padding in the browser’s default style rules. However, the description of
the marker-offset property does imply that margin is the way to go.
Whatever the intent of the specification, Firefox and Safari apply a default padding
to the left side of lists, while most other browsers (including Internet Explorer
and Opera) use a margin. You can test this easily by applying a background-color
to an ol or ul element. On most browsers, the background will not cover the list
item markers; on Firefox and Safari, they will.
For this reason, whenever you apply your own left margin or padding value to a
list, you must be sure to specify both. If you applied only a margin, for example,
the default list indentation would display in Firefox, but be overridden on all
other browsers. If you applied a padding value only, the default 50-pixel margin
would display on Internet Explorer. Only by specifying both margin and padding
(usually by setting padding: 0 and using margin to do the job) can you ensure
consistent rendering across current browsers.

 

Unlike horizontal margins, vertical margins are not cumulative. If you have two
elements stacked one atop the other, like the h1 and h2 elements shown in Html,

the vertical spacing between them will be the greater of the
margin-bottom setting of the top element, and the margin-top setting of the
bottom element. In this case, they are both 100px, so the distance between the two
elements is 100px(not 200px, as you might have supposed). If I had defined the
margin-bottom of the h1 as 200px, then the vertical distance separating the two
elements would have been 200px.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Box Model Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
        body
        {
            background-color: #808080;
            color: black;
        }
        h1
        {
            background-color: #c0c0c0;
            color: black;
            margin-bottom: 100px;
        }
        h2
        {
            background-color: #c0c0c0;
            color: black;
            margin-left: 5%;
            margin-top: 100px;
            margin-bottom: 100px;
            padding-left: 1em;
        }
        p
        {
            background: #c0c0c0;
            color: black;
            margin-left: 20%;
            padding-left: 10%;
            margin-top: 100px;
            margin-bottom: 100px;
        }
    </style>
</head>
<body>
    <h1>
        No top margin but a 100px bottom margin</h1>
    <h2>
        Top and bottom margins are set to 100px</h2>
    <p>
        A paragraph with top and bottom margins set to 100px</p>
</body>
</html>

　　

posted on 2012-07-28 10:03  dragonstreak_1  阅读(194)  评论(0)  编辑  收藏  举报

导航