So verhindern Sie einen zusätzlichen unteren Rand beim Schweben eines Bildes mit Text ⇐ CSS

[Guest]

Ich habe einen Block, der aus einem Bild mit Text umwickelt ist: < /p>

Code: Select all

* * * T T T
* * * T T T
* * * T T T
T T T T T T

H H H

wobei * das Bild darstellt, t Text und H ist ein Header, der dem Text-/Bildblock folgt.
Ich brauche CSS -Regeln, die beide Bedingungen erfüllen: < /p>

< /ol>

Code: Select all

* * * T T T
* * * T T T
* * * T T T
* * *
* * *

H H H
< /code>
In diesem Fall fällt der Rand des Bildes nicht zusammen und fügt stattdessen zu Hs Margin-Top hinzu, was unerwünschten zusätzlichen Speicherplatz schafft. Ich erreiche das gewünschte Verhalten? = "Snippet-Code">
.container {
max-width: 600px;
margin-bottom: 30px;
font-family: Arial, sans-serif;
line-height: 1.6;
display: block;
}

.float-image {
float: left;
margin-right: 15px;
margin-bottom: 15px;
width: 150px;
height: auto;
}

.container::after {
content: "";
display: block;
clear: both;
}

.header {
margin-top: 30px;
}< /code>

[img]https://dummyimage.com/150x150/c6ff83/000000[/img]

This is an example of an image floated to the left with text wrapping around it.

Header