<img> positioning behavior

Question

I can't seem to wrap my head around how img tags behave alongside text in an html page.

I've removed margins and padding, but there always seems to be some extra space under the img or some other unexpected behavior. I'm sure theres quick CSS workaround using absolute positioning or negative margins but I'm looking for a more general solution.

Question: Can someone explain how img tags are positioned, specifically why do they get offset vertically when alongside text?

Answer 1

What you see under the img is the space needed for the descendant part of a glyph like g or j. An image behaves just like a letter and sits on the baseline.

img
{
    display: block;
}

Will fix it for you.

An experiement that might shed some light:

<p style="font-size: 1em;">Lorem ipsum dolor <em style="font-size: 800%;">sit</em> amet.</p>

Think of the <em> as a ~128px high image (if 1em is 16px that is).

Answer 2

IMG elements get positioned just like any other inline element.

Answer 3

CSS has two types of display: attributes: block and inline.

Inline is like text. It streams along, wraps at the end of a box, stuff like that.

Block is chunky and has margins and padding and width (either calculated or derived).

It doesn't make a whole lot of sense, but <img> is actually an inline element, along with <a>, <abbr> and many others. What's happening is that the image is actually being rendered roughly equivalent to letters, and it just happens to not be 12pt tall, but maybe 130px or whatever your image is. That's why it sticks up.

Declare <img style="display:block;" src="image.png" /> to get it to behave like the box most people think it is.

Answer 4

If you want the <img> to be an inline element, you can use the vertical-align CSS attribute to specify how the image will be aligned relative to the line of text it appears in. This page has examples under the "vertical-align on inline elements" heading.

Answer 5

If you want more control over your image positioning, wrap your image in a DIV and control the positioning of the DIV. You can float the div if you want to intermingle it with your text.

Answer 6

The key to getting your text to wrap around your image is setting the float attribute like so:

img {
float:left;
display:block;
}

Answer 7

This might not be relevant in this particular case (hopefully the advice from previous answers should solve your problem), but if you're finding you're getting unexpected extra space around elements, make sure that you've removed the default padding, margins etc. that browsers often add to elements (and of course different browsers often add different amounts of padding, margins etc.

If you make sure you've zeroed margins and padding etc. by using

body { margin: 0; padding: 0; border: 0; }

at the start of your CSS, you can then add any padding and margins etc. without having to worry that the browser's defaults are going to cause any unexpected spaces, and hopefully fewer inconsistencies between browsers.