x
 
Павел Карасёв
30 ноября 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Вопрос к технологам.

Почему при оборачивании картинки появляется лишний пробел, и как вы с этим боритесь?

В приведенной картинке разметка такая:

<a href="#" style="border: solid 1px red;">
  <img src="//bureau.ru/bb/soviet/i/polovnyov.png" />
</a>
<a href="#" style="border: solid 1px red; display: inline-block;">
  <img src="//bureau.ru/bb/soviet/i/kulmatov.png" />
</a>

Изображение по умолчанию ведёт себя как текст, так как является инлайновым элементом. Инлайновые элементы выравниваются по базовой линии текста, которая проходит выше нижней границы родительского элемента. Поэтому под изображением образуется пробел.

Это становится очевидно, если поставить изображение рядом с текстом:

Вася

При этом отсутствие текста не является помехой. Изображение встаёт на базовую линию шрифта, применённого к этому блоку:

Чтобы избавиться от этого эффекта, можно поменять поведение элемента на блочное:

<!-- index.html -->
<a href="#">
  <img src="polovnyov.png">
</a>
/* style.css */
a {
  border: 1px solid red;
}

img {
  display: block;
}

Или явно указать изображению вертикальное выравнивание:

<!-- index.html -->
<a href="#">
  <img src="polovnyov.png">
</a>
/* style.css */
a {
  border: 1px solid red;
}

img {
  vertical-align: bottom;
}
О базовой линии шрифта
P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор весной. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Комментарии

Евгений Закурдаев
30 ноября 2017

А ещё можно обнулить размер шрифта у контейнера.

Юрий Хан
30 ноября 2017

В примере картинка завёрнута в ссылку. Поэтому нужно ещё упомянуть, что, если картинку сделать блочным элементом, то ссылка будет активироваться не только кликом в картинку, но и кликом в остаток пространства с боков картинки (до полей окружающего блока). А это, в частности, будет безмерно бесить пользователей, которые прокручивают страницу средней кнопкой мыши.

«display: inline-block» такой проблемы не вызывает.

Максим Софронов
30 ноября 2017

Иногда можно еще и line-height сделать равным нулю.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

EM или REM? 6 Можно ли достичь эффекта переливания без встраивания видео на сайт? 1




Недавно всплыло

4 Практика: формулировка полезного действия 8 Иногда я спрашиваю о скидке для тренировки и потому что не против шанса сэкономить 1 Как вы проверяете соответствие вёрстки макету 2