Inline image affecting line-height

Asked 11/1, 2013 at 7:24 Answered 8/1 at 21:47

I have a div and I am adding an image in-line, the problem is when the image is bigger than the line-height it just increases the line-height instead of having the image go over the text.

Here is my code:

<html>
  <body>
    <div style="height:130px; width:130px;">
      one two three four five 

<img src="http://ladyenews.files.wordpress.com/2011/03/smiley-emoticon.png" style="width: 20px; height: 20px; display:in-line;">

       six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen
    </div>
  </body>
</html>

Example here: http://jsfiddle.net/dWkfq/1/

So how do I get my image to get inserted into my div without the line-height increasing, I need the image to overlap onto the text if it is too big?

I was thinking maybe somehow putting the image in another div with a max-height and then setting the overflow to visible or something but I'm afraid the answer will be much harder and involve absolute positioning with javascript.

I would just absolutely position the image on my own but the text is subject to change so I need a flexible solution.

Longways answered 11/1, 2013 at 7:24 Comment(1)

you can try adding CSS property float: left or float: right if that fits your need – Umbelliferous 11/1, 2013 at 7:28

Replace

display:in-line;

with

position:absolute;

http://jsfiddle.net/ENch9/

vertical-align:text-top;

http://jsfiddle.net/c6YqG/

Penguin answered 11/1, 2013 at 7:29 Comment(8)

This was working but then I added more text so that the image would return to the next line and it started overlapping text (if the width got bigger). See in the example, I'll increase the width and text gets covered up: jsfiddle.net/SGgg5 jsfiddle.net/Tgyxp – Longways 11/1, 2013 at 7:39

So text-top fixes that width problem I was having with position absolute but now the problem is that if the height is too big with text-top the next line's line height is distorted, this didn't happen with position:absolute... jsfiddle.net/Pu4FF I need to somehow combine the two haha. – Longways 11/1, 2013 at 7:40

Solved it by adding the image inside a div with a span around the image and after the image a blank image with a fixed width that wasn't absolutely positioned but had a width less than that of the line-height so that it wouldn't affect it like the first one did (a buffer image if you will, this images SRC was nill), I also had to then adjust the image's position to bottom:-(insert half of image height here)px; And set the div's position to relative. jsfiddle.net/tYWJT – Longways 11/1, 2013 at 7:50

^I would have just needed the buffer image except I had to lower the emoticon so I needed a div around it with relative position so I could adjust the bottom:_px – Longways 11/1, 2013 at 7:55

Unfortunately I can't use smaller images or increase line-height for this scenario... it's not even an option. Thankyou though! – Longways 11/1, 2013 at 14:51

@AlbertRenshaw the fiddle you posted is messed up, do you have another one? – Debutante 8/11, 2014 at 21:36

@MarkBoulder Strange, it was working at the time, on the new Safari though it doesn't work anymore /: No I am no longer working on this project, but that was the last JSFiddle I ever had for this problem. – Longways 9/11, 2014 at 16:18

@AlbertRenshaw no problem. See #26822851 if you ever have that problem again. – Debutante 9/11, 2014 at 17:5

I find using negative margin on the image to be the most flexible solution for this:

img {
    margin-top:-6px; 
    position: relative; 
    top: 5px;
}

http://jsfiddle.net/dWkfq/4/

Ostracoderm answered 3/12, 2015 at 17:7 Comment(2)

Works perfectly for my use case, and really simple to implement. Thanks! – Georgy 18/10, 2018 at 7:9

Unfortunately, requires some finagling to find the right values for a particular image size, but it seems to scale well. – Inveterate 7/1, 2021 at 14:50

for smiles you can try:

img {
vertical-align:middle;
}

Ancelin answered 11/1, 2013 at 7:28 Comment(0)

I wrapped the img in a <div> and then added float:left; to the in-line style of the img

<div style="height: 20px; width: 20px; display: inline-block;"> 
<img style="height:20px; width:20px; float: left;">... </div>

Upperclassman answered 8/1 at 21:47 Comment(0)

Recommended topics

Hot tags