Inline image affecting line-height

问题

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.

回答1:

Replace

display:in-line;

with

position:absolute;

http://jsfiddle.net/ENch9/

vertical-align:text-top;

http://jsfiddle.net/c6YqG/

回答2:

for smiles you can try:

img {
vertical-align:middle;
}

回答3:

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/

来源：https://stackoverflow.com/questions/14273544/inline-image-affecting-line-height

标签

javascript

image

inline

css