浮动元素有上边距

Question

我已经提出了一个正确的元素，并且出于某种原因，它有一个优势。我不知道它来自哪里。

HTML：

<p>...</p>
<p class="foo">...</p>
<p>...</p>
<p>...</p>

CSS：

p.foo { 
  width: 500px;
  float: right;
}

图像：

codepen.io: http://codepen.io/vbelenky/pen/oEmHt

Answer 1

所有段落都有默认的边距：p { margin: 1em 0; }，浮动的段落没有区别。

1. 如果您在浏览器中测量两个段落之间的边距，您会看到它不是2em（1em + 1em），但总共只有1em。
2. 此浮动段落与其他段落不同，但具有相同的默认边距。

为什么1.？据说（垂直）边距已折叠（CSS2.1 Collapsing margins）。这是非常自然的文本显示（而HTML / CSS主要是关于文本），在处理其他类型的内容时不是很自然，但浏览器不能知道这种事情......

  

在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以组合形成单个边距。以这种方式组合的边距据说会崩溃，因此产生的合并边距称为折叠边距。   （...）
  水平边距永远不会崩溃。

为什么2.？不同之处在于浮动元素的垂直边距不会折叠（与上面相同的链接，请参见绿色的第二个注释）

  

浮动框和任何其他框之间的边距不会崩溃

解决方案非常明显：当涉及到垂直边距时，您必须以与文档正常流程中不同的方式处理浮动元素（至少您必须考虑是否必须修改值或不）。这里.foo { margin-top: 0 }或.foo { margin: 0 }（取决于您想要在此浮动段落底部的边距）

Answer 2

我认为，当<p></p>或类似<h1></h1>之类的文本元素从 Float 中脱离DOM，或者像 position：absolute <这样的特殊定位时/ strong>或 position：fixed 获得双倍上边距，此规则仅适用于文本元素，而不适用于div或任何其他元素。

解决方案很明确，只需将 margin-top:0 添加到元素并解决问题。

Answer 3

在CSS中添加margin-top: 0px;样式。浏览器在每个段落之前和之后添加1em空格。如果您在Chrome中检查样式并查找用户代理样式，您会注意到以下内容：

p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

-webkit-margin-before是在浮动段落之上分配该空间的内容。另请查看以下答案，了解如何以跨浏览器方式开发您的网站：

• Best Practice for CSS Reset

Answer 4

p元素由浏览器获取默认样式。它们具有默认的用户代理样式表，即使站点从不告诉它，它也会加载到每个页面上。尝试使用normalize.css或其他一些规范化样式表来禁用＆＃39;默认浏览器样式。

p元素的默认Chrome / chrome样式：

p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}

Answer 5

默认情况下，大多数浏览器将<p>设置为最高限额。实际上，您的codepen示例中的所有<p>都具有边距。如果您使用的是Chrome，则它来自默认的浏览器样式：

p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}

要解决此问题，只需添加以下额外的CSS：

.foo {
    margin-top: 0px;
 }