为什么我的浮动保证金底部不正确？

Question

我有一个内容框，其中需要一个div框，该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>

我真正不明白的是为什么下边距为20px；我的.fake-image无效？利润更大。有人可以帮忙吗？

这是我的意思的图片：

Answer 1

此空间不是多余的空白。这是包装线高度的剩余部分

换句话说，除非您的线以某种方式完美地划分了该空间，否则在图像下方断开的线可能无法完美地断开以匹配您的页边距结束的确切位置。在大多数情况下尝试控制此操作是不合理的，但是，假设它是完全静态的内容，则可以完成此修复程序，但我不建议您尝试执行此操作，因为您可能正在艰难的战斗中。

要对此进行自我测试：：除去图像上的底边距以外的所有边距，并调整行高和版式样式，以查看它们如何一起玩和/或仅操作底边距该图像和/或图像高度。

Answer 2

每当遇到这样的问题时，我都会向相关的CSS添加特异性。 margin在这种情况下。 margin: 0 20px 20px 0;的缩写margin-top:0; margin-right: 20px; margin-bottom:20px; margin-left:0;

通过也知道底部周围是什么来固定底部。

在这里我在其周围添加一个div并将其设置为背景，以便您看到图像的实际位置。其他空间属于其他元素。

现在，我们有了丑陋的石灰和红色，可以看到什么，调整图像和段落等，然后我们可以稍后删除那些丑陋的CSS东西。

.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-top: 0;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px; */
  margin: 0 20px 20px 0; 
}
.outside-image{float: left;background-color:lime;}
p {border:1px solid red;}

<div class="content">
  <div class="outside-image"><div class="fake-image"></div></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>