为什么对齐的 <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

因为右侧的图像浮动到右侧。它正在应用您的保证金，您只是无法分辨。该段落实际上一直扩展到该图像下方的右侧，只是内容框没有。您的 margin-right 需要是该图像的宽度加上 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 中处理填充和文本对齐等。