Question

I’m having an odd issue with whitespace in a design I’m building.

I created a <div> to contain voting elements – it holds an upvote button, downvote button, and vote total, each inside their own <div> element, and using <img> for the buttons.

Source:

<div class="votebox">
  <div class="vote"><img src="upvote.png" /></div>
  <div class="votetotal">15</div>
  <div class="vote"><img src="downvote.png" /></div>
</div>

In the mini-reset in my CSS, both <div> and <img> elements are defined to display without margins or padding, and FireBug confirms these specific elements have no margins or padding, but I’m seeing whitespace being added between the bottoms of the <img> elements and the bottom of their respective containing ` elements.

I added the following CSS to display a border around each element:

.votebox * {
  border: 1px #000 solid;
}

and this is how it displayed in Firefox 3.6 (yes, those are StackOverflow vote images.. I’m using them as placeholders for the moment):

Now, the obvious answer to this problem is to simply set the “vote” class to have an explicit height of the images (and I will do this, possibly even opting for CSS sprites over <img>s), but I’m much more interested in learning why these elements are displaying in this manner (this is supposed to be a self-teaching project after all).

Can anyone shed some light on this for me?

---

Edit: Steve H has pointed out to me that I should be using outline, rather than border, to show the outer edges of elements. I’ve made that change, and also separated the elements in CSS so they each display as a different colour.

The new outline looks like this:

As you can see, the issue is a bit different than I thought. It looks like there is some whitespace below the image, but this is compounded by the fact that the bottom image seems to be rendered slightly outside its containing <div>. This seems weird to me.

Answer 1

Images in HTML are inline elements and are by default placed on the font base line, so what you are seeing is probably the space for the descenders. The usual way around this is either setting them to display: block or vertical-align: bottom.

EDIT: BTW, you can format images with CSS just like any other element, so you can mostly likely drop the extra divs around the images.