Question

我有两个div，每个div都有50px的填充，因此它们相距100px。在顶部div中，我有一个右侧浮动的图像，周围有段落。如果文本在图像下方流动，我的需求团队希望在图像下方有20px的边距，如果图像下没有文本则没有边距。

<div class="panel">
    <img src="https://images.pexels.com/photos/45170/kittens-cat-cat-puppy-rush-45170.jpeg">
    <p>some text that may or may not flow under the image</p>
    <p>some text that may or may not flow under the image</p>
    <p>some text that may or may not flow under the image</p>
</div>
<div class="panel">
    <p>text</p>
</div>

.panel {
  padding-top: 50px;
  padding-bottom: 50px;
  border-top:1px solid black;
  overflow:hidden;
}

img {
  width: 55%;
  float: right;
  margin-left: 20px;
  margin-bottom: 20px;
}
p {
  background-color: red;
  margin-bottom: 0;
}

js fiddle：https://jsfiddle.net/asgwL21v/12/

正如您所看到的，当文本在图像下方流动时，文本和行之间的空间为50px。如果文本没有在图像下流动，则图像和线条之间的间距为70px。

Answer 1

如果减少底部填充并允许边距进行工作会怎样？

.panel {
  padding-top: 50px;
  padding-bottom: 30px;   /* 20px will be supplied by margin */
  border-top:1px solid black;
  overflow:hidden;
}

p:last-child {
  margin-bottom: 20px;  /* Give the last paragraph 20px of margin just in case it flows past the image */
}

img {
  width: 55%;
  float: right;
  margin-left: 20px;
  margin-bottom: 20px;
}

在上面的代码中，额外空格的20px将从图像或文本的最后一段添加到父容器中，总计为50px。 Here's an updated version of your Fiddle showing it in action.

如何合并图像的下边距和容器的填充

1 个答案: