css - 为什么我的 float margin 底部不正确？

Question

我有一个内容框，我想要一个向左浮动的 div 框和围绕它流动的段落。到目前为止我的 HTML 看起来像这样:

.content {
  float: left;
  padding: 20px;
  width: 650px;
  height: 500px;
  background-color: #F5CF8E;
  /* Yellowish */
}

.fake-image {
  float: left;
  width: 200px;
  height: 200px;
  border: 0.5px solid gray;
  padding: 20px;
  margin: 0 20px 20px 0;
}

<div class="content">
  <div class="fake-image"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
</div>

我真正不明白的是为什么 margin-bottom: 20px;我的 .fake-image 不起作用？余量更大。有人可以帮忙吗？

这是我的意思的图像:

Answer 1

此空间不是额外 margin 。这是环绕线高度的剩余部分

换句话说，在图像下方断开的线可能无法完美地断开以匹配边距结束的确切位置，除非您的线以某种方式完美地划分了该空间。在大多数情况下尝试控制这一点是不合理的，但是，假设如果它是完全静态的内容，您可以完成修复，但我不建议尝试这样做，因为您可能正在打一场艰苦的战斗。

要亲自测试一下:删除图像上除底部边距之外的所有边距，并操纵行高和版式样式以查看它们如何一起使用和/或仅操纵图像上的底部边距该图像和/或图像高度。