为什么使用此HTML/CSS设置边距或填充的行为与预期不符？_Html_Css

为什么使用此HTML/CSS设置边距或填充的行为与预期不符？

html css

为什么使用此HTML/CSS设置边距或填充的行为与预期不符？,html,css,Html,Css,我试图使用边距和填充来微调页面上的一些间距，它们要么根本不起作用，要么超出预期。我有一个简单的页面，上面有一个“单词包装”无序列表，用于导航，下面是一些简单的文本内容以下是HTML： <!DOCTYPE html> <html> <head> <title>my title</title> <meta name="description" content=""/> &

我试图使用边距和填充来微调页面上的一些间距，它们要么根本不起作用，要么超出预期。我有一个简单的页面，上面有一个“单词包装”无序列表，用于导航，下面是一些简单的文本内容

以下是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>

下面是它的屏幕截图：

我想做的主要事情是在导航和文本内容之间添加一些额外的垂直间距。现在，正如你所看到的，已经有了一些很好的间距，因为li上的底部边距。但我不想使用li来添加更多的间距，因为我希望它大于li的底部边距。所以…如果我在导航栏上设置了下边距或下边距，什么都不会改变。为什么？如果我在视图上设置了上边距，则不会有任何更改。为什么？如果我将.view上的顶部填充设置为1px，则会产生额外的17px空间。为什么会这样？那么，如何在导航和视图之间准确地添加一些额外的垂直间距呢

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

您需要更改

的

填充

和

边距

属性

CSS:

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

您的导航div没有足够的高度来提供下一个框的边距，视图框也没有。

给两者一个可以移动的高度

浮动li元素时，父容器高度将塌陷为0

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

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

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

要解决此问题，您可以：

为父对象定义特定高度，使其不会塌陷到0的高度，或
向父项中添加一个以防止其折叠

您的

。导航的高度为0，因为所有列表项都是浮动的。流动儿童除非受到控制，否则不会增加父母的身高。如果在.navigation
的底部放置较大的底部边距，您应该会看到一些移动，但这不是最好的方法。您应该在UL中包含浮动，可能可以使用此处描述的策略：

至于为什么在.view
中添加1px的填充会导致比这大得多的间距，现在p
标记边距与.view
框和li底部边距重叠。当您向.view
添加填充时，会在li
页边距和p
页边距之间放置一些内容，防止它们一起运行
如果在.view
和.navigation
div中临时添加背景色，情况会更加明显。
避免在代码块中使用
标记，因为这会给HTML实体带来不必要的不便-通过标记，您可以简单地用四个空格缩进每一行，使用{}按钮或Ctrl+K可以很容易地完成。我只是把你的代码放到一把小提琴里，它看起来像预期的那样工作。我在视图
中添加了页边距顶部
，而视图按预期向下移动。我尝试使用JSFIDLE将页边距顶部添加到.view，但没有效果。我试着用你们的JSFIDLE填充顶部，效果如预期。然而，当我使用真正的HTML和CSS文件测试它时，填充top确实是这样工作的。
.navigation ul li a {
    margin: 10px;
    padding: 5px;
}