@Senseich

Как убрать отступ сверху текста при обтекании изображения?

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

К сожалению мне не показать всей картины, т.к. на локалке делаю, но суть такова, что есть изображение и текст, который его обтекает, заданы line-height: 1.5 и font-size: 22px . И вот тут я заметил, что у текста при большом размере шрифта, появляется отступ сверху, хотя при небольших размерах его не видно почти. Для наглядности пример (на моём проекте этот отступ ещё больше)
5ae8924d0bd7f996867154.jpeg
Я так понимаю, что природа этого заключается в шрифте, из-за него появляется такой отступ.
Мне же нужно, чтобы верх изображения и текста совпадали, были на одной линии. Конечно можно задать изображению верхний отступ, но хотелось бы узнать если какие то ещё варианты решения.
  • Вопрос задан
  • 199 просмотров
Пригласить эксперта
Ответы на вопрос 2
@slavaitis
margin-top: 0px; скорее всего. Либо можешь картинку искусственно снижать на 5px(или сколько там)
Ответ написан
Комментировать
vladislav_boychenko
@vladislav_boychenko
Купаюсь в гривнах
У всех шрифтов есть такая вещь, как межстрочное расстояние, оно подразумевает отступ и сверху строки, и снизу. Даже line-height равный font-size в 99% шрифтов не решает это проблему. Задавать картинке отступ -- не лучшее решение, я в работе в таких случаях первому "p" задаю отрицательный отступ вверх и на этом проблемы пропадают.
.block p:first-of-type {
  margin-top: -5px;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы