A white space problem

I’m trying to create a simple page taking up the entire page and no more with two images at the top and two almost empty areas at the bottom. I’ve used CSS tables to get it to fill the page and that works fine in Chrome, FF and Edge - I haven’t felt brave enough to look at IE11.

The only trouble is a bit of white space below the images which I can’t seem to get rid of. It doesn’t seem to be padding or line height but it appears to belong to the cells or the top row. What am I missing, please?

https://codepen.io/gandalf458/pen/apQEbP

Try

.cell img {
  display:block;
}
3 Likes

Spiffing! Thanks Jeff. But why did that work?

Images are inline elements and are stacked on the baseline (not the bottom) of the line exactly where text would be placed thus leaving room underneath for descenders.

Setting the image to display:block means that the vertical-alignment no longer applies and the image is placed on the bottom of the line. You could have also set vertical-align top (or bottom) to cure the gap but I generally set all images to display:block by default anyway.

5 Likes

Final tidbit: For anyone who doesn’t know, descenders are the bits of letters that hang beneath the baseline, like with y, g, q, etc.

4 Likes

Ah - that’s interesting!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.