为什么合理的<p>元素会忽略右边距？</p>

Question

我有一个包含段落，列表和右浮动div的div。

父div有一个text-align：justify;属性。

我给p的（全方位）边距为20px，但由于某些奇怪的原因，边距在段落的右侧被忽略。我在ul上尝试过，同样的事情发生了。

如果我没有证明父div中的文本，则不会忽略边距。 （但我确实希望它合理）。

浮动div有一个余量：0;所以我想这不是一个崩溃的利润率问题。

浮动div是固定尺寸（像素）div，除了背景图像外，它是空的。

我还试图通过margin-right指定保证金：20px;它不起作用......

我知道我可以通过向浮动div添加左边距来解决它。但我想知道发生了什么。

这是我正在使用的代码（我只编辑了类名）。

CSS：

.parentDiv {
    position: absolute;
    width: 660px;
    height: 350px;
    z-index: -1;
    background-color:#4F4F4F;
    color:#FFFFFF;
    text-align:justify;
    overflow:hidden;
}

.foatedDiv {
    float:right;
    height:100%;
    margin:0;

}

.parentDiv p {
        margin:20px;
}

HTML：

<div class="parentDiv">
 <div class="floatedDiv" style="width:234px;background-image:url(images/jp01.jpg)"></div>

  <strong><a href="someAnchor">Anchor</a></strong>

  <p>Sope paragraph that I cannot understand why ignores its right margin and is driving me crazy.</p>

  <strong>Some Topic</strong>

  <ul>
     <li>Some long item long enough to show there is no right margin.</li>
     <li>Some long item long enough to show there is no right margin.</li>
     <li>Some long item long enough to show there is no right margin.</li>
     <li>Some long item long enough to show there is no right margin.</li>
  </ul>
</div>

这就是我得到的：

Answer 1

因为右侧的图像向右浮动。它正在应用你的保证金，你无法分辨。该段实际上在该图像下一直向右扩展，只是内容框没有。您的边距权利需要是该图片的宽度加 20px才能将其缩小20px。

您的保证金实际上是什么样的：

当浮动元素将内容推向左侧时，实际的物理框仍然会扩展到后面。要更多地推送内容，您必须考虑图像占用的所有空间。一种方法是将它的宽度添加到右边的边距，如下所示：

.parentDiv p {
    margin: 20px 254px 20px 20px; /* 234 + 20 = 254 */
}

请参阅solution on jsFiddle。

Answer 2

正在应用保证金，但由于图像较宽，因此被视为“足够好”。

要解决此问题，请添加padding: 0.01px;。直觉上这没有区别，因为你看不到百分之一的像素，但填充应该强制应用边距。

Answer 3

不确定您是否注意到拼写错误？

**.foatedDiv** {
  float:right;
  height:100%;
  margin:0;
}

应该 floatedDiv

我相信代码可以满足您的需求。但是在你引用图像的内联样式中添加margin-left：20px并且应该修复它。

如果您还有疑问，可以将标题和无序列表包装在另一个div中，并在该div中处理填充和文本对齐等。