Question

当我尝试将margin-top设置为#nav元素时，为什么该属性会影响整个标头div？

来源：

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>Improving Great Deal</title>
    <style type="text/css">
      * {
        margin: 0px;
        padding: 0px;
      }
      #header {
        background: black;
        height: 60px;
        width: 100%;
        clear: left;
      }
      #nav {
        width: 50%;
        height: 40px;
        background: red;
        margin: 5px auto;


      }
      #nav ul {
        list-style: none;


      }
      #nav ul li {
        float: left;

      }
      #nav ul li a {
        text-decoration: none;
        color: white;
        font-size: 20px;
        padding: 0px 23px;
        line-height: 34px;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <div id="nav">
        <ul>
          <li><a href="#">Pocetna</a></li>
          <li><a href="#">Forum</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Pitanja</a></li>
          <li><a href="#">Informacije</a></li>
          <li><a href="#">Zarada</a></li>
        </ul>
      </div>	
    </div>


  </body>
</html>

＆＃13;

Answer 1

margin获得重叠的原因是您需要overflow: hidden;来展示它。请参阅以下详细信息。要包含孩子的margin，您需要添加overflow: hidden。对此的可能解释如下。

此问题的几种可能的解决方案包括：

div { border: 2px solid transparent;
      overflow: hidden;}

div table {display: block;}

浏览器总是将边距与附近的边距折叠起来。当您提供overflow: hidden时，它会计算其框内模型中的所有内容，并将其限制在内容中。

很抱歉我的快速脏手写......

这也是float的情况。浮动物品不占用任何空间。看看这里：

＆＃13;

div {padding: 5px; border: 1px solid #666;}

＆＃13;

<div>
  <div style="float: left;"></div>
</div>

＆＃13;

但同样的事情，如果父母有一个overflow: hidden，它就不会发生：

＆＃13;

div {padding: 5px; border: 1px solid #666;}

＆＃13;

<div style="overflow: hidden;">
  <div style="float: left;"></div>
</div>

＆＃13;

这里有一篇关于这个概念的大文章：What You Should Know About Collapsing Margins。 overflow是一个强大的属性，它适用于一切。但是当谈到position时，你需要仔细使用它！

position的工作方式与float类似，两者都不采用布局。例如，请参阅以下代码段：

＆＃13;

div {padding: 5px; border: 1px solid #666;}

＆＃13;

<div>
  <div style="position: absolute;"></div>
</div>

＆＃13;

如果你以错误的方式玩它，那么

＆＃13;

div {padding: 5px; border: 1px solid #666;}

＆＃13;

<div style="overflow: hidden; position: relative;">
  <div style="position: absolute;"></div>
</div>

＆＃13;

以上内容被删除。希望很清楚。

CSS边距和填充

1 个答案: