Плавающий элемент Span Добавление пространства - PullRequest
Новая
       26

Плавающий элемент Span Добавление пространства

2 голосов
/ 04 января 2012

У меня есть что-то вроде следующего кода: 

<div style="border:2px black solid;overflow:hidden;">
    <span style="float:right;">
        <img src="sprintlogo.png" alt="Test Image 1" />
    </span>
    <img src="sprintlogo.png" alt="Test Image 2" style="float:left;" />
    <p>Test Text</p>
</div>

По какой-то причине нижняя граница вокруг <div> не совпадает с изображениями и т. Д. Например, мы получаем такие вещи:

Example

Это не проблема с изображениями или чем-либо еще (т. Е. В файле изображения нет пробелов).

Добавив background-color:blue; к атрибуту <span> style, мы можем видеть, что диапазон занимает дополнительное пространство.

Example 2

Я попытался возиться с полем диапазона и отступом, но безрезультатно.У кого-нибудь есть представление о том, что происходит?

1 Ответ

4 голосов
/ 04 января 2012

Очень странно.

Я обнаружил, что, удаляя диапазон и просто перемещая изображение вправо, он удаляет лишнее пространство.Указывая, что проблема была в промежутке.

Затем я посмотрел на firebug и обнаружил, что дополнительное пространство было визуализировано по высоте.

Видимо, пространство создается чужим символом (что странно, потому чтосимвол все еще там, если вы удалите пробел ...), как показано здесь , где я превращаю размер шрифта в 0, и пробел исчезает.

Редактировать

Да, проблема, безусловно, заключается в том, что изображение позиционируется, предполагая, что есть текст, и выравнивая его с текстовым текстом (veritcal-align:baseline;). Другое исправление - выравнивание изображения с нижней частью этого текста здесь .

...