Clever Geek Handbook

Inline image affecting line height

I have a div and I am adding an image to a line, the problem is the image is larger than the line height, it just increases the line height, instead of the image showing 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>

An example is here: http://jsfiddle.net/dWkfq/1/



So how do I get the image to be inserted into my div without extending the line, I need the image to overlap over the text if it's too big?

I thought maybe somehow put the image in another div with maximum height and then set the overflow to visible or something, but I'm afraid the answer will be a lot more complicated and involve absolute positioning using javascript.

I would just completely position the image myself, but the text can be resized, so I need a flexible solution.

+2


source to share


3 answers


Replace

display:in-line;

from

position:absolute;


http://jsfiddle.net/ENch9/

OR

vertical-align:text-top;

http://jsfiddle.net/c6YqG/

+6


source


for smiles you can try:



img {
vertical-align:middle;
}
+2


source


I find using a negative image margin is the most flexible solution for this:

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

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

0


source






More articles:


All Articles