Bizzare <img /> расстояние между тегами - PullRequest
Новая
       18

Bizzare <img /> расстояние между тегами

2 голосов
/ 11 марта 2012

Почему в абзаце <p> есть странный интервал с тегами <img/>?

Я заметил это из-за использования firebug, где img может быть на 4-5 пикселей выше, где текст должен быть встроенным.

Пример: http://jsbin.com/epavij

Здесь тег <a> окружает <img/>, а показано, что <a> занимает меньшее место на несколько пикселей.

Очевидно, display:block исправляет эту проблему, но что ее вызывает?

Ради аргумента я планирую сделать изображение встроенным в некоторый текст;хотя я проверил, и добавление текста не решает проблему.

Ответы [ 5 ]

2 голосов
/ 11 марта 2012

Это вызвано комбинацией line-height и vertical-align.

Быстрый пример: http://jsfiddle.net/3A3sw/1/

См. Также http://www.w3.org/wiki/CSS/Properties/vertical-align

2 голосов
/ 11 марта 2012

Чтобы понять ситуацию, представьте, что встроенные изображения - это буквы другого шрифта / размера.

Далее посмотрите примеры здесь: http://phrogz.net/css/vertical-align/index.html

1 голос
/ 11 марта 2012

это происходит из-за "базовой линии", которая происходит с элементами, которые встроены. "baseline" является значением по умолчанию (поправьте меня, если я ошибаюсь) vertical-align для элементов, особенно для встроенных элементов (таких как span и якоря)

, чтобы показать вам, что я имею в виду, попробуйте разместить текст, например буквы "qfx", рядом с изображением. Вы заметите, что нижняя часть изображения совпадает с нижней частью «х». это базовое выравнивание - на котором сидит ваш тег <img>.

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

0 голосов
/ 11 марта 2012

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

Так, например, с таким HTML 

<div class="wrap">
    <div class="line">
        <a href=""><img src="/favicon.ico" /></a>
    </div>
</div>​

Этот CSS перестанет работатьупомянутый вами «странный» интервал: (который уже объяснен в других ответах здесь) 

div.wrap {background-color:#9f3; width:100px;}
a,img {border:none; height: 16px;}
div.line{background-color: yellow; height: 16px; border-top: 1px solid black; border-bottom: 1px solid black;}​

Тестовый случай .

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

0 голосов
/ 11 марта 2012

Встроенные изображения часто приводят к добавлению нескольких пикселей пустого пространства под изображением в некоторых браузерах.Если вы гуглите это, вы увидите, что это общая проблема.Вот несколько ссылок для справки.Первый - дублирующий вопрос переполнения стека:

...