为什么使用此 HTML/CSS 设置边距或填充不符合预期？答案

【问题标题】：Why does setting the margin or padding with this HTML/CSS not behave as expected?为什么使用此 HTML/CSS 设置边距或填充不符合预期？
【发布时间】：2012-03-20 03:46:01
【问题描述】：

我正在尝试使用边距和填充来微调页面上的一些间距，但它们要么根本不起作用，要么超出预期。我有一个简单的页面，顶部有一个用于导航的“自动换行”无序列表，下面是一些简单的文本内容。

这是 HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>my title</title>
        <meta name="description" content=""/>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width">
        <link type="text/css" rel="stylesheet" href="styles.css"/>
    </head>
    <body>
        <div class="navigation">
            <ul>
                <li><a href="#">link_one</a></li>
                <li><a href="#">link_two</a></li>
                <li><a href="#">three</a></li>
                <li><a href="#">link four</a></li>
                <li><a href="#">fivefive</a></li>
                <li><a href="#">link six</a></li>
                <li><a href="#">seven</a></li>
                <li><a href="#">eight</a></li>
                <li><a href="#">ninenine</a></li>
                <li><a href="#">ten</a></li>
                <li><a href="#">eleven</a></li>
                <li><a href="#">12121212</a></li>
            </ul>
        </div>
        <div class="view">
            <p>sentences here with no markup.</p>
        </div>
    </body>
</html>

这是 CSS：

body {
    margin:10px;
}

.navigation {
    width:100%;
    float:none;
}

.navigation ul {
    padding:0;
    margin:0;
    list-style-type:none;
    text-align:left;
}

.navigation ul li {
    float:left;
    margin:0 14px 12px 0;
}

.view {
    clear:left;
}

.view p {
    width:100%;
}

这是它的截图：

我想做的主要事情是在导航和文本内容之间添加一些额外的垂直间距。现在您可以看到，由于 li 的底部边距，那里已经有了一些不错的间距。但我不想使用 li 添加更多间距，因为我希望它大于 li 底部边距。所以......如果我在 .navigation 上设置底部边距或底部填充，则根本没有任何变化。为什么？如果我在 .view 上设置上边距，则根本没有任何变化。为什么？如果我将 .view 的顶部填充设置为 1px，它会创建额外的 17px 空间。为什么要这样做？那么如何才能准确地在导航和视图之间添加一些额外的垂直间距呢？

我想做的另一件事是在 .navigation 上设置右边距和填充。但是当我设置这些时，什么都没有发生——它们只是保持为零。这是为什么呢？

【问题讨论】：

避免在代码块中使用<pre> 标签，因为它会给 HTML 实体带来不必要的不便 - 使用 Markdown，您可以简单地将每行缩进四个空格，使用 { } 按钮或 Ctrl+K 轻松完成.
我只是将您的代码放入小提琴 jsfiddle.net/shw9j 中，它似乎按预期工作。我在view 中添加了margin-top，view 按预期向下移动。
我尝试使用您的 jsfiddle 将 margin-top 添加到 .view ，但没有效果。我用你的 jsfiddle 尝试了 padding-top，它按预期工作。但是，当我使用真实的 HTML 和 CSS 文件对其进行测试时，padding-top 确实可以这样工作。

标签： html css

【解决方案1】：

.navigation UL 的高度为 0，因为所有列表项都是浮动的。漂浮的孩子不会增加他们父母的身高，除非他们被收容。如果您在.navigation 的底部放置较大的底部边距，您应该会开始看到一些移动，但这不是最好的方法。您应该在 UL 中包含浮点数，可能使用此处描述的策略：

List doesn't contain its floated list items

至于为什么向.view 添加 1px 的填充会导致比这更大的间距，现在 p 标签边距与 .view 框和 li 底部边距重叠。当您向.view 添加填充时，会在li 边距和p 边距之间放置一些东西，从而防止它们一起运行。

如果您暂时将背景颜色添加到 .view 和 .navigation div，那么发生的情况会更加明显。

【讨论】：

【解决方案2】：

浮动 li 元素时，父容器高度折叠为 0。

清除 0 高度父容器的下一个元素将自动添加一个上边距，以适当地适应先前父容器的折叠高度。

如果您随后定义的上边距小于自动应用的上边距，浏览器渲染引擎仍将应用较大的边距。如果您应用的边距大于自动应用的边距，则会应用您的值。

这很奇怪，但根据 CSS 规范是正确的。

要解决此问题，您可以：

为父对象定义一个特定的高度，这样它就不会折叠到 0 的高度，或者
向父项添加clearfix 以防止其折叠。

【讨论】：

【解决方案3】：

您的导航 div 没有高度来提供向下推下一个框的边距 - 您的视图框也没有。给两者一个移动的高度。

【讨论】：

【解决方案4】：

您需要更改<a>s 的padding 和margin 属性

CSS：

.navigation ul li a {
    margin: 10px;
    padding: 5px;
}

【讨论】：