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.
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.
OK, no prob. That explains why it doesnāt make sense
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>
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.
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.
(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>
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.
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
respect 