Я просто изменил изображение заголовка на своем сайте с
<div style="background-image... width=1980 height=350>
к использованию
<img src="... style="width:100%;">
поэтому изображение будет уменьшаться, что теперь делает...
Но теперь у меня есть таинственный 10px пробел или около того.
Я проверил инспектора в Chrome, и я просто не вижу, что вызывает пробел. Я искал другие сообщения, но не могу найти ничего, что применимо.
У кого-нибудь есть идея? Цените любую помощь, Боб:)
По умолчанию IMG является встроенным элементом. Тег IMG должен быть блочным элементом, который может быть выполнен с помощью этого стиля:
display: block;
Посмотрите на эту строку текста. Обратите внимание, что нет букв, которые нарушают базовую линию.
Теперь рассмотрим следующее предложение:
Просто пересекая мост, он, вероятно, ушел.
Обратите внимание на буквы j, g, p и y. Эти буквы, известные в типографии как descenders, нарушают baseline.
Источник: Wikipedia.org
Значением свойства vertical-align по умолчанию является baseline. Это относится к элементам линейного уровня.
Ваш img по умолчанию является встроенным, и, как текст, span, input, textarea и другие встроенные поля, выровнены по базовой линии. Это позволяет браузерам предоставить пространство, необходимое для размещения descenders.
Обратите внимание, что пробел не создается полями или заполнением, поэтому его нелегко обнаружить в инструментах разработчика. Это небольшое повышение содержания с нижней кромки контейнера в результате выравнивания базовой линии.
Вот несколько способов справиться с этим:
vertical-align: bottom к тегу img. В некоторых случаях bottom не будет работать, поэтому попробуйте middle, top или text-bottom.display: inline на display: block.line-height на контейнере. В вашей ссылке на код (поскольку удален из-за linkrot), line-height: 0 сделал трюк.font-size: 0 в контейнере. Вы можете при необходимости восстановить размер шрифта на дочернем элементе.по теме:
Добавить
display: block;
в <img>.