Question

申请我的div #logo保证金值会强制我所有其他元素都遵循此保证金。它在“徽标”div边际值中。将它设置为0时，它就会出现。我只想稍微调低这个元素。为什么？我该如何解决？

#logo  {
    width: 400px;
    height: 400px;
    margin: auto;
    margin-top: 200px; //!This!
}

#label {
    height: 50px;
    float: right;
    
   
}

nav {
    
    float: left;
    margin-left: 30px;
}

ul li{
    display: inline;
    text-decoration: none;
    font-size: 40px; 
    margin: 10px;
    border-bottom: 20px red;
    
}

<body>
        <div id="label"><img src="3.png"></div>
        
       <nav>
        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contacts</a></li>
        </ul>
           </nav>
        
        <div id="logo"><img src="1.png"></div>
        

    </body>

Answer 1

#logo { position: relative; top: 200px; }

相对定位不会影响其他元素的位置。

Answer 2

正如@Uchit Kumar所说，由于保证金崩溃，你可以阅读here：

当且仅当：
时，两个边距相邻
...   ...

都属于垂直相邻的盒子边缘，即形成以下一对：

盒子的上边距及其第一个流入的孩子的上边距

由于所有子元素都已浮动，因此第一个流入子元素为logo，因此其边距将与容器（主体）之一折叠。

所以最简单的解决方法是让第三个元素也浮动：

#logo {
  width: 100px;
  height: 100px;
  margin: auto;
  margin-top: 200px;
  float:left
}

#label {
  height: 50px;
  float: right;
}

nav {
  float: left;
  margin-left: 30px;
}

ul li {
  display: inline;
  text-decoration: none;
  font-size: 40px;
  margin: 10px;
  border-bottom: 20px red;
}

<body>
  <div id="label"><img src="https://lorempixel.com/100/100/"></div>
  <nav>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contacts</a></li>
    </ul>
  </nav>

  <div id="logo"><img src="https://lorempixel.com/100/100/"></div>


</body>

但是这个解决方案并不合适，因为它会改变徽标的行为，也许这里不需要浮动。

避免边缘折叠的另一个方法是在容器（主体）上添加一个小的填充顶部：

body {
 margin:0;
 padding-top:1px;/*added this */ 
}
#logo {
  width: 100px;
  height: 100px;
  margin: auto;
  margin-top: 300px;
  clear:both;
}

#label {
  height: 50px;
  float: right;
}

nav {
  float: left;
  margin-left: 30px;
}

ul li {
  display: inline;
  text-decoration: none;
  font-size: 40px;
  margin: 10px;
  border-bottom: 20px red;
}

<body>

  <div id="label"><img src="https://lorempixel.com/100/100/"></div>
  <nav>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contacts</a></li>
    </ul>
  </nav>

  <div id="logo"><img src="https://lorempixel.com/100/100/"></div>


</body>

或者只是在前一个元素中使用margin-bottom：

body {
  margin: 0;
}

#logo {
  width: 100px;
  height: 100px;
  margin: auto;
  clear: both;
}

#label {
  height: 50px;
  float: right;
}

nav {
  float: left;
  margin-left: 30px;
  margin-bottom: 300px;
}

ul li {
  display: inline;
  text-decoration: none;
  font-size: 40px;
  margin: 10px;
  border-bottom: 20px red;
}

<body>

  <div id="label"><img src="https://lorempixel.com/100/100/"></div>
  <nav>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contacts</a></li>
    </ul>
  </nav>

  <div id="logo"><img src="https://lorempixel.com/100/100/"></div>


</body>

这是一个非常有用的链接，你可以找到关于崩溃边缘和浮动的更完整的解释：

margin-top not working with clear: both

Answer 3

快速修复是..

#logo  {
    width: 400px;
    height: 400px;
    margin: auto;
    margin-top: 200px;
    float: left
}

可能是由于保证金崩溃......（不确定）读这个.. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

HTML和CSS边距问题

3 个答案: