简单 CSS 两块设置中的意外上边距答案

【问题标题】：Unexpected top margin in simple CSS two blocks setup简单 CSS 两块设置中的意外上边距
【发布时间】：2016-02-02 06:36:52
【问题描述】：

这里是演示：http://jsfiddle.net/vvvqwac2/

您可以在 FF 和 Chromuim 中看到“Hi2”块具有奇怪的上边距，而这并不打算存在。为什么会出现以及如何正确修复？

HTML：

<div id="container">
    <div id="b1">
        <h3>hi1</h3>
    </div>
    <div id="b2">
        <h3>hi2</h3>
    </div>
</div>

CSS：

#container {
    padding: 10px;
}

#b1 {
  float: left;
  width: 100px;
  height: 400px;
  background: blue;
} 

#b2 {
  height: 100px;
  background: orange;
}

【问题讨论】：

标签： html css

【解决方案1】：

只需添加：

h3{margin:0}

默认情况下，标题标签有一些样式，例如边距。

【讨论】：

【解决方案2】：

<h3>hi2</h3> 添加自己的边距，明确设置为 0。

h3 {
    margin: 0; /* Disable margin for all h3 elements ... */
}

#container {
    padding: 10px;
}

#b1 {
  float: left;
  width: 100px;
  height: 400px;
  background: blue;
} 

#b2 {
  height: 100px;
  background: orange;
}

    #b2 > h3 {
        margin: 0; /* ... or disable margin ONLY for the first h3 child of #b2 */
    }

<div id="container">
    <div id="b1">
        <h3>hi1</h3>
    </div>
    <div id="b2">
        <h3>hi2</h3>
    </div>
</div>

为html 和body 禁用padding 和margin 也是一种常见做法：

html, body {
    margin: 0;
    padding: 0;
}

【讨论】：

【解决方案3】：

将 overflow:auto 添加到包含 div 将解决您的边距折叠问题。

#b2 {
  height: 100px;
  background: orange;
  overflow:auto; /* add this */
}

DEMO

浮动、绝对 [和固定] 定位元素、块容器（例如非块的内联块、表格单元和表格标题）框，并阻止具有“溢出”而不是“可见”的框（除了当该值已传播到视口时）建立新的阻止其内容的格式化上下文。

margin（以及在前面的float、padding 的后续流入元素的情况下）操作的正是块格式上下文的这种变化。

参考：block formatting context

来自 SO 的更多信息：Why would margin not be contained by parent element?

【讨论】：

【解决方案4】：

更改 CSS

#container {
    padding: 0px;
}

#b1 {
  float: left;
  width: 100px;
  height: 400px;
  background: blue;
} 

#b2 {
  height: 100px;
  background: orange;
}

【讨论】：

【解决方案5】：

这是由于父元素中的填充。您已将 10px 填充应用于 hi2 中显示的父元素。

在 hi1 中，此填充不可见，因为您已在其上应用了浮动。当您在任何元素上应用浮动时，该元素已从文档的正常流程中取出。您可以在以下链接中阅读更多关于浮动的信息。

https://developer.mozilla.org/en/docs/Web/CSS/float

您的问题可以通过添加溢出来解决：隐藏；在#b2 元素中。

#b2 {
  height: 100px;
  background: orange;
     overflow:hidden;
}

【讨论】：

【解决方案6】：

"Hi2" 块的上边距很奇怪，因为

#container {
   padding: 10px;
}

b2 不浮动，所以它在文档流中

b1 float 使其脱离文档流

【讨论】：