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

Question

[Senseich]

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

К сожалению мне не показать всей картины, т.к. на локалке делаю, но суть такова, что есть изображение и текст, который его обтекает, заданы line-height: 1.5 и font-size: 22px . И вот тут я заметил, что у текста при большом размере шрифта, появляется отступ сверху, хотя при небольших размерах его не видно почти. Для наглядности пример (на моём проекте этот отступ ещё больше)

Я так понимаю, что природа этого заключается в шрифте, из-за него появляется такой отступ.
Мне же нужно, чтобы верх изображения и текста совпадали, были на одной линии. Конечно можно задать изображению верхний отступ, но хотелось бы узнать если какие то ещё варианты решения.

Answer 1

[slavaitis]

margin-top: 0px; скорее всего. Либо можешь картинку искусственно снижать на 5px(или сколько там)

Answer 2

[Владислав Бойченко]

У всех шрифтов есть такая вещь, как межстрочное расстояние, оно подразумевает отступ и сверху строки, и снизу. Даже line-height равный font-size в 99% шрифтов не решает это проблему. Задавать картинке отступ -- не лучшее решение, я в работе в таких случаях первому "p" задаю отрицательный отступ вверх и на этом проблемы пропадают.

.block p:first-of-type {
  margin-top: -5px;
}

Comments

[Senseich]

Владислав Бойченко, почему именно первому? и таким способом текст смещается вверх вместе с изображением, каким образом вы это применяете?

Вот для примера создал: https://jsfiddle.net/7tt66sp2/

[Senseich]

Владислав Бойченко , можете на моём примере показать как вы это делаете https://jsfiddle.net/7tt66sp2/

[Владислав Бойченко]

Senseich, посмотрел, оказывается, что при флоатной картинке так не работает. Значит надо либо дополнительно оборачивать, либо действительно задавать картинке отступ сверху, а потом родительскому блоку отрциательный отступ назад наверх.

[Владислав Бойченко]

Senseich, https://codepen.io/anon/pen/zjwBNa