Comment fusionner la marge inférieure d'une image et le remplissage d'un conteneur

Question

J'ai deux divs qui ont chacun un remplissage de 50px donc ils sont à 100px. Dans le div supérieur, j'ai une image qui est flottante avec des paragraphes autour de lui. Mon équipe d'exigences aimerait 20px de marge sous l'image si le texte passe sous l'image et aucune marge s'il n'y a pas de texte sous l'image.

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

violon js: https://jsfiddle.net/asgwL21v/12/

Comme vous pouvez le voir, lorsque le texte coule sous l'image, l'espace entre le texte et la ligne est 50px. Si le texte ne coule pas sous l'image, l'espace entre l'image et la ligne est 70px.

Answer 1

Et si vous réduisiez le rembourrage du bas et que vous laissiez les marges faire le travail?

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

Dans le code ci-dessus, 20px d'espaces supplémentaires seront ajoutés sur le conteneur parent soit de l'image ou le dernier paragraphe du texte, vous donnant 50px totale. Here's an updated version of your Fiddle showing it in action.