Set image to same line with text that doesn't have default line height

Question

If my text doesn't have default line-height value and I have images that are floated either left or right it looks like the image doesn't start from the same line as the text. Is there anything I can do about it? I know I could add some top-margin for the image but it is manual work. I have hundreds of images and text chapters and this problem is everywhere. My problem is demonstrated here: https://codepen.io/shnigi/pen/VwKmYPb It looks like the image starts way above the text.

body {
  max-width: 900px;
  margin: auto;
}

p {
  line-height: 4em;
}

img {
  float: left;
  margin-right: 20px;
}

<p><img src="https://via.placeholder.com/350">Messages are used for personal, family, business and social purposes. Governmental and non-governmental organizations use text messaging for communication between colleagues. In the 2010s, the sending of short
  informal messages became an accepted part of many cultures, as happened earlier with emailing.[1] This makes texting a quick and easy way to communicate with friends, family and colleagues, including in contexts.</p>

score 1 · Answer 1 · answered Jan 11 '21 at 14:22

One approximation is to reset the line-height of the first line but this will make the gap with the next line smaller than the others:

body {
  max-width: 900px;
  margin: auto;
}

p {
  line-height: 4em;
}

p::first-line {
  line-height: initial;
}

img {
  float: left;
  margin-right: 20px;
}

<p><img src="https://via.placeholder.com/350">Messages are used for personal, family, business and social purposes. Governmental and non-governmental organizations use text messaging for communication between colleagues. In the 2010s, the sending of short
  informal messages became an accepted part of many cultures, as happened earlier with emailing.[1] This makes texting a quick and easy way to communicate with friends, family and colleagues, including in contexts.</p>

Yeah I also know this trick, it is a "fix" but not a permanent or good one. I wonder why this is not more common problem. — Shnigi, Jan 12 '21 at 08:43

score 0 · Answer 2 · answered Jan 11 '21 at 14:22

0

This is because line-height doesn't define space between line, but... your line's height, so you have your text at the vertical middle. More explanation here : https://iamvdo.me/blog/css-avance-metriques-des-fontes-line-height-et-vertical-align

You have to compute a margin top for your image : 1/2 line-height - font-size / 2

img
{
  float: left;
  margin-right: 20px;
  margin-top: calc(2em - 16px / 2);
}

answered Jan 11 '21 at 14:22

Waytaria

109
1
7

*I know I could add some top-margin for the image but it is manual work. I have hundreds of images and text chapters and this problem is everywhere* – Temani Afif Jan 11 '21 at 14:23
@TemaniAfif Why should it be manual work? One class `img{}` will do. This is about the best you can get, I guess. – Michel Jan 11 '21 at 14:37
it's not me, it's what the OP said in the question – Temani Afif Jan 11 '21 at 14:38
@Waytaria Perhaps replace `16px` with `1em` (Relative to the font-size of the element). Makes it a bit more flexible. – Michel Jan 11 '21 at 14:40
@Termani. Sorry, thought you where OP. But still, he's wrong about the _manual work_ – Michel Jan 11 '21 at 14:41
@Michel I just can't add a top margin to every single image as they might be in the middle or bottom of the chapter. This problem is only for images that are on the top of the chapter. Though I could try how it looks if every single image top, middle, bottom would have default margin. I mean it is manual work to add class name only for images that start at the top and not touch the others. – Shnigi Jan 12 '21 at 08:11
@Waytaria your link is not in english :/ – Shnigi Jan 12 '21 at 08:44
Would adding a negative margin to your text instead fix the problem since you don't touch to your image anymore ? And sorry for the french link, but if you have a translater the article is very interesting. – Waytaria Jan 12 '21 at 09:25
@Waytaria I believe it is not possible as images are inside P tags and then the negative margin will affect both nodes. – Shnigi Jan 12 '21 at 13:04

Set image to same line with text that doesn't have default line height

2 Answers2