Question

我很难弄清楚为什么我的导航元素上设置的边距是从主体下推而不是从容器的父元素中推下来的。在下面的代码中，我有一个灰色背景和白色容器。当我在导航中应用上边距时，白色容器被推下而不是我的导航。

如果有人能帮助我理解这一点，我将非常感激。谢谢！

html,body{
    background-color: lightgray;
    margin: 0;
    height: 100%;
}
.container{
    background-color: white;
    width: 600px;
    margin: auto;
    height: 100%;
}
nav{
    margin-top:20px;
}

<html>
<body>
    <div class='container'>
        <nav>
            <span>Nav 1</span>
            <span>Nav 2</span>
            <span>Nav 3</span>
        </nav>
    </div>
</body>
</html>

Answer 1

这种情况正在发生，因为边距崩溃。同样的边框和填充也是如此。要避免此崩溃，您可以使用以下解决方案之一：

解决方案：1

将overflow: auto;或overflow: hidden;添加到container课程。

Plnkr DEMO：

http://plnkr.co/edit/9kpcNulpRYyRkUd3HFuJ?p=preview

Stack Snippet：

＆＃13;

html,body{
    background-color: lightgray;
    margin: 0;
    height: 100%;
}

.container{    
    background-color: white;
    width: 600px;
    margin: auto;
    height: 100%;
    overflow: auto; /* overflow */
}

nav{
    margin-top:20px;
}

＆＃13;

<html>

  <body>
    <div class='container'>
        <nav>
            <span>Nav 1</span>
            <span>Nav 2</span>
            <span>Nav 3</span>
        </nav>
    </div>
  </body>

</html>

＆＃13;

解决方案：2

使用边距和填充重置：

＆＃13;

html,body{
    background-color: lightgray;
    margin: 0;
    height: 100%;
}

.container{    
    background-color: white;
    width: 600px;
    margin: auto;
    height: 100%;
    padding-top: 1px; /* padding and margin resets */
    margin-top: -1px;
}

nav{
    margin-top:20px;
}

＆＃13;

<html>

  <body>
    <div class='container'>
        <nav>
            <span>Nav 1</span>
            <span>Nav 2</span>
            <span>Nav 3</span>
        </nav>
    </div>
  </body>

</html>

＆＃13;

Answer 2

您的保证金不会从正文中推下，而是从类.container

的容器中推出

在下面的代码段中

班级container的div有蓝色边框，nav有边框red

导航仍然在身体

中的div中

<强>段

<style>
  html,
  body {
    background-color: lightgray;
    margin: 0;
    height: 100%;
  }
  .container {
    background-color: white;
    width: 600px;
    margin: auto;
    height: 100%;
    position: relative;
    border: solid blue;
  }
  nav {
    margin-top: 20px;
    border: solid red;
    position: relative;
  }
</style>

<body>
  <div class='container'>
    <nav>
      <span>Nav 1</span>
      <span>Nav 2</span>
      <span>Nav 3</span>
    </nav>
  </div>

Answer 3

可能您的边框未定义尝试定义容器的边框使其sth像

.container { border-style: solid;
 color: White;
 width: (your preferred width);
 height: (your preferred height );
 }

尝试一下，让我知道它是否有效。在开始stylesheets之前，建议您使用css重置。

Answer 4

这是因为有时css规则只是愚蠢。这是一个修复。

在.container类之后在css中添加此类：

 .container::before {
           clear: both;
           content: "";
           display:table;
        }

那应该解决问题。看看https://jsfiddle.net/e4k6L2nr/1/

Answer 5

我认为很多人都喜欢用css规范化器开始他们的样式表，我不相信这里明确涵盖了。我在使用下划线进行一些wordpress主题开发的同时转向了它。

* {
    margin:0;
}

这基本上就是你所需要的。它有助于覆盖用户可能附加到浏览器的预定义样式或您不了解自己设置的其他规则。

让我添加，*选择器，选择一切。有时我也会使用该区域来删除文本修饰并建立基本字体大小，以便以后可以使用em或rem。

Answer 6

从我已经完成的测试中，当元素是分割的第一个时，似乎margin属性被应用于父元素。

我建议你改用padding属性。您可以找到here有关这些属性之间差异的一些信息。

Answer 7

试试这个：

＆＃13;

   

        html,body{
            background-color: lightgray;
            margin: 0;
            height: 100%;
        }

        .container{
            background-color: white;
            width: 600px;
            margin: auto;
            height: 100%;
        }

        nav{
            position: relative;
            top: 20px;
        }

＆＃13;

<html>
<body>


<div class='container'>
    <nav>
        <span>Nav 1</span>
        <span>Nav 2</span>
        <span>Nav 3</span>
    </nav>
   </div>

</body>
  </html>

＆＃13;

为什么身体的边缘而不是容器？

7 个答案: