Non-stretching line-height

I have a paragraph of text which contains, besides the text, a number of inline images. Whenever these inline images are higher than the line height of the text, the line spacing automatically gets adjusted. Is there a way to stop that from happening, or to circumvent it. I would like to set the line-height of a paragraph of text to be a certain numerical value and not stretch, regardless of any inline images. If the image is too big to fit without stretching line height, it should go behind the text, but still remain inline.

Simply putting “p { line-height: 40px }” does not work, if the image is higher than 40px. It seems that the line-height property is a minimum value, and there doesn’t seem to be a way to set the maximum value.

I’d like leading of the text to remain constant.

This image illustrates the problem:
https://image.ibb.co/dmx6ZK/fixed_line_height4.png

Hi, kresimircindric. Welcome to the forums.

If you have not read our posting guidelines, please take a few minutes and read them now.

Forum POSTING Guidelines (Posting Basics): (Help us help you!)

Social guidelines:
https://www.sitepoint.com/community/faq#civil

Please post the code that you are using to create the screenshots in the form of a “working page” as explained in the posting guidelines.

Have you ever taken a basic HTML and CSS course? (Your are new here and I am attempting to learn something of your background and experience.)

1 Like

Sorry, I did read the guidelines, but I figured the question was simple enough without a code example.

Here is the codepen for the first example: https://codepen.io/Kresimir235/pen/MPwWVY. Notice how the image stretches the leading of text. My question is how to avoid that, how to put the image behind the text, but in such a way that it still remains inline (and is responsive to resizing the browser window, etc…). The second example in the OP is what I’m asking about. If I knew how to generate it using HTML+CSS, I wouldn’t be asking (I drew the image in Paint).

Yes, I have basic knowledge of HTML and CSS, but I’m clearly not an expert in the subject.

1 Like

OK, no prob. That explains why it doesn’t make sense :smile:

Looks like you DO need to take a basic class.

Are you looking for something like this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>inline-image placement = Kresimir</title>
<!--
https://www.sitepoint.com/community/t/non-stretching-line-height/307840/4
-->
    <style>
p {
    font-size:30px;
    line-height:40px;
}
img {
    vertical-align:middle;
    outline:1px solid red;
}
    </style>
</head>
<body>

<p>Lorem ipsum dolor sit amet consectetur adipiscing, elit fringilla ornare justo cursus habitant sapien, pretium eu curae rutrum ridiculus. Nisi nec et ridiculus quam condimentum mattis scelerisque semper sociosqu, fusce ullamcorper at urna cursus nascetur non luctus felis, ac curabitur ultrices turpis sed pulvinar purus mi. Vehicula magna facilisi porta odio a ullamcorper parturient semper nullam, dictumst habitant venenatis nisi curae imperdiet suscipit sociis nunc, erat dis turpis enim sed luctus aenean placerat <img src="https://via.placeholder/100x100" height="100px" width="100px"> Vehicula magna facilisi porta odio a ullamcorper parturient semper nullam, dictumst habitant venenatis nisi curae imperdiet suscipit sociis nunc, erat dis turpis enim sed luctus aenean placerat. Vehicula magna facilisi porta odio a ullamcorper parturient semper nullam, dictumst habitant venenatis nisi curae imperdiet suscipit sociis nunc, erat dis turpis enim sed luctus aenean placerat. Vehicula magna facilisi porta odio a ullamcorper parturient semper nullam, dictumst habitant venenatis nisi curae imperdiet suscipit sociis nunc, erat dis turpis enim sed luctus aenean placerat. Vehicula magna facilisi porta odio a ullamcorper parturient semper nullam, dictumst habitant venenatis nisi curae imperdiet suscipit sociis nunc, erat dis turpis enim sed luctus aenean placerat.</p>

</body>
</html>

No, that’s not it, that just vertically aligns the image to be in the middle of the line, but still makes text leading uneven.

I would like the image to not affect the line spacing at all, but to go behind the text if it doesn’t fit.

Will the images always be the same width?
If so, this is one attempt, but I’m not completely happy with it, as the fixed width feels a bit “magic numberish” to me.

First I tried it without to relative positioning, so you would not have to fix the image width, wrapping the image in a span with a fixed height and having the image overflow it. But that did not work, the image still expanded the containing span and increased the line height. The only option I saw then was to take the image out of the flow with absolute positioning, something I would rather not do, as it loses its width influence as well ad height, resulting in the need to set a width.

2 Likes

Explain again what you want. Do you want the test to flow around the image? If so, that is best done using floats at eigher edge of the paragraph, not in the middle of the page.

No the image should not interfere with the line-height. There is a drawing in post #1 of what is required :slight_smile:

Something like this perhaps:

img {margin-top:-99em;position:relative;z-index:-1}

(add a class to the image rather than address all images)

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
p {
	font-size:30px;
	line-height: 40px;
}
img.test {
	margin-top:-99em;/* amy large number greater than is greater than any expected image*/
	position:relative;
	z-index:-1;
	background:red;/* for testing*/
}
</style>
</head>

<body>
<p>Lorem ipsum dolor sit amet consectetur adipiscing, elit fringilla ornare justo cursus habitant sapien, pretium eu curae rutrum ridiculus. Nisi nec et ridiculus quam condimentum mattis scelerisque semper sociosqu, fusce ullamcorper at urna cursus nascetur non luctus felis, ac curabitur ultrices turpis sed pulvinar purus mi. Vehicula magna facilisi porta odio a ullamcorper parturient semper nullam, dictumst habitant venenatis nisi curae imperdiet suscipit sociis nunc, erat dis turpis enim sed luctus aenean placerat <img class="test" src="someurl" height="100px" width="100px"> Vehicula magna facilisi porta odio a ullamcorper parturient semper nullam, dictumst habitant venenatis nisi curae imperdiet suscipit sociis nunc, erat dis turpis enim sed luctus aenean placerat. Vehicula magna facilisi porta odio a ullamcorper parturient semper nullam, dictumst habitant venenatis nisi curae imperdiet suscipit sociis nunc, erat dis turpis enim sed luctus aenean placerat. Vehicula magna facilisi porta odio a ullamcorper parturient semper nullam, dictumst habitant venenatis nisi curae imperdiet suscipit sociis nunc, erat dis turpis enim sed luctus aenean placerat. Vehicula magna facilisi porta odio a ullamcorper parturient semper nullam, dictumst habitant venenatis nisi curae imperdiet suscipit sociis nunc, erat dis turpis enim sed luctus aenean placerat.</p>
</body>
</html>
3 Likes

So the OP wants the text to overlay the image?
(or the image to underlay the text)

1 Like

No, underlay I believe :slight_smile:

The image should sit inline and stretch upwards but under any text that is in the way.

I’m not sure how that will look in in any real sense but that seems to be what the OP has asked for :wink:

2 Likes

Looks like Paul nailed it with the negative margin.

3 Likes

Yeah, that’s pretty much it! Thank you! :smiley:

Yes, that is clever! I would not have solved this even if I had read the original post correctly.
karate respect karate

@PaulOB, can you direct me to a paragraph/source that explains how the negative margin-top works as used here?

2 Likes

I’m also curious about how this works.
And also how my first attempt did not work, where the parent span has a fixed height, but the child img still expands the line outside of it.
I guess it has to do with the image being an inline element. Note changing it to block or vertical-align: top it does sort of work, but the image hangs below the line, not above like the OP’s picture.

1 Like

I wouldn’t have come up with the idea of using negative margins in a hundred years. It’s a very clever solution.

I believe it works like this (but I’m not sure): it tricks the browser into thinking that the element has no height at all (since margin is added to the height of the object, negative margin effectively subtracts from the height, and the height cannot be negative so a very large negative margin reduces the height to zero). And since the height of the object is effectively zero, the text leading is not stretched. But the object is drawn properly, at the text baseline, at its full size. Then it’s just a matter of adjusting z-index.

It works perfectly, I’m very pleased with the solution :slight_smile:

2 Likes

Thank you for posting the question, @kresimircindric

Sorry I got off to such a rocky start. I did not read your post carefully enough.

2 Likes

I believe it’s here:

https://www.w3.org/TR/CSS22/visudet.html#block-root-margin

For ‘inline-block’ elements, the margin box is used when calculating the height of the line box.

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.