如何合併圖像的底部邊距和容器的填充

Question

我有兩個div，每個div都有50px的填充，因此它們相距100px。在頂部div中，我有一個正確的圖像，並且圍繞它顯示段落。如果文本在圖像下方流動，並且圖像下方沒有文字，則我的要求小組會在圖像下面放置20像素的邊距。

<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; 
} 

爵士小提琴：https://jsfiddle.net/asgwL21v/12/

正如你可以看到，當文本圖像下方流動，文字與線之間的空間是50像素。如果文字不在圖像下方流動，則圖像與線條之間的間距爲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.