Question

I’m trying to overlay text over an image, and when I wrap an image in a div and apply a border, you can see that there is extra space afterward. Where is this space coming from, and how do I remove it? The following jsfiddle has an example.

http://jsfiddle.net/ngd5R/22/

Notice that the background of .avatar is red to show that the bounding box is larger than the image it contains. I can’t just apply the border to img since .message relies on the height of the parent.

Answer 1

Add the following line to your rules for .avatar img:

display: block;

The red background will go away. Here’s the updated fiddle. By default, images are inline elements (technically, inline-block IIRC), meaning that they flow the same as text. If you make the image a block-level item, the “text-style” flow rules won’t apply.