Как удалить дополнительную граничную нижнюю часть из плавающего изображения?

Решение должно быть таким:

<style>
img{
    float: left;
    margin: 0 20px 20px 0;
    background-color: #CCC;
}

p{
    clear: left;
    margin: 0px;
}
</style>

<p><img height="100" width="100" />dummy text dummy text dummy text dummy text</p>
<p>here some text</p>

Вы можете очистить плавающий объект, применив "clear: left;" к любому тегу после "p". Однако я предпочитаю решение, приведенное ниже (оно также решает проблему, связанную с тегом "p"):

<style>
img{
    float: left;
    margin: 0 20px 20px 0;
    background-color: #CCC;
    }
p{
    margin: 0px;
    }

div.clearer{
    clear: left;
    }

#container{
    width: 300px;
    border: 1px solid #CCC;
}
</style>

<div id="container">
    <img height="100" width="100" />
    <p>dummy text dummy text dummy text dummy text</p>
    <div  class="clearer"></div>
</div>
<p>here some text</p>

РЕДАКТИРОВАТЬ: Мое предложение такое же даже в случае вашего примера (однако в этом примере вы можно удалить «clear: left», примененный к тегу «p», и вы не можете использовать второй метод, который я предложил)! Поведение тегов "p" и "img" в этом примере нормально ... Я пытаюсь объяснить:

если вы установите высоту строки абзаца на 20 пикселей (с размером шрифта <20 пикселей ) и поля (внизу и справа) img (высота которого кратна 20) до 20 пикселей, строка в нижней части img принудительно разделяется вправо, если нет не менее 40 пикселей (поле 20 пикселей -bottom + 20px line-height) ниже img! Это нормально, потому что нет • Достаточно места для линии высотой 20 пикселей!

Итак, вы можете выбрать или установить для поля значение меньше 20 пикселей, или уменьшить высоту строки!

Problematic image height

Your image seems to exceed line-height setting by 5px exactly. That's why you're getting this excess space.

You can try negative bottom margin on this image only, but text may come too close to it. The amount of negative margin needed equals excess pixels (in the case of this image it's 5px).

Container DIV

You could however wrap your images in container DIVs that would have an exact line-height multiple height. And also set overflow: hidden; on them as well. But I suggest you set font-size and line-height to points (pt), to control their values.

Okay, after having a look to the page, this is not a margin problem, but the fact that your font has not any space to be including at the next line.

Try to change the font size, and you will see that this margin is sometimes reducing, sometimes increasing.

Возможно:

<style>

p img {
   margin: 0px;
}
</style>