Question

你可以在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;
}

Answer 1

只需添加：

h3{margin:0}

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

Answer 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>

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

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

Answer 3

更改CSS

#container {
    padding: 0px;
}

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

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

Answer 4

将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?

Answer 5

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

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

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

你可以通过添加overflow：hidden来修复你的问题;在＃b2元素中。

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

Answer 6

＆＃34; HI2＆＃34;块有奇怪的上边距，因为

#container {
   padding: 10px;
}

b2不会浮动，因此它位于文档流程

中

b1 float从文档流程

创建它

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

6 个答案: