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

Когда мы используем <img> внутри <p><img style="float:left">dummy text dummy text dummy text dummy text</p>, то как мы можем иметь один и тот же край справа и внизу изображения?

http://jitendravyas.com/image-margin.htm

ОТВЕТЫ

Ответ 1

Использовать свойство vertical-align: bottom; для изображения, то дополнительное пространство снизу будет удалено.

Ответ 2

Высота проблемного изображения

Ваше изображение, кажется, превышает значение высоты линии на 5 пикселей. Вот почему вы получаете это лишнее пространство.

Вы можете попробовать отрицательное нижнее поле только на этом изображении, но текст может приблизиться к нему. Требуемое количество отрицательного поля равно лишним пикселям (в случае этого изображения 5px).

Контейнер DIV

Однако вы можете обернуть ваши изображения в DIV контейнера, которые будут иметь точную высоту с высотой линии. А также установите overflow: hidden; на них. Но я предлагаю вам установить font-size и line-height на точки (pt), чтобы контролировать их значения.

Ответ 3

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

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

EDIT: Мое предложение одинаково даже в случае вашего примера (однако в этом примере вы можете удалить "clear: left", примененный к тегу "p", t используйте второй метод, который я предложил)! Поведение тегов "p" и "img", в примере, это нормально... Я пытаюсь объяснить:

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

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

Ответ 4

Хорошо, посмотрев на страницу, это не проблема с маржой, а тот факт, что ваш шрифт не имеет места для включения в следующую строку.

Попробуйте изменить размер шрифта, и вы увидите, что этот запас иногда уменьшается, иногда увеличивается.

Ответ 5

Это потому, что это, безусловно, встроенный контент. Если вы хотите сохранить содержимое в строке, но удалите интервал, просто добавьте:

line-height: 0;

Ответ 7

У меня тоже была эта проблема, и я решил ее, поместив <img> -tag в <div>, с свойством line-height, установленным в 0.

Вот пример jsfiddle.net.
Обратите внимание, что между изображением и <hr> под ним нет места.

Это не работает, если вам нужно поместить изображение в середине текста, потому что изображение будет в его собственной строке, с текстом перед ним на предыдущей строке, а текст после него на следующей строке, например здесь.

Ответ 8

Может быть:

<style>

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