3

Have a look at this page. The images on the right should be centered within their divs. But if you look closely, there's a small border of around 3 pixels at the top. And if you disable the overflow: hidden (through firebug or the IE8 equivalent), it sticks out the bottom.

The HTML is this:

<div class="small">
    <img src="/images/photos/Bedroom.jpg" alt="Bedroom" />
</div>
<div class="small">
    <img src="/images/photos/View.jpg" alt="View" />
</div>

And the CSS, this:

div.small
{
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    overflow:hidden;
    margin:5px;
    background-color: #C0C0C0;
    float:left;
}
div.small img
{
    vertical-align: middle;
    max-width:100px;
    max-height:100px;
    display: inline;
}

What is causing this mysterious gap? I've checked margins and padding, and they don't seem to be the problem.

Douglas B. Staple
  • 10,510
  • 8
  • 31
  • 58
Eric
  • 95,302
  • 53
  • 242
  • 374
  • CSS questions are better asked on http://doctype.com not on SO. – EBGreen Sep 02 '09 at 15:11
  • Really? I thought doctype.com was for design, as opposed to problems. – Eric Sep 02 '09 at 15:31
  • It is for design (CSS) problems which is what I would categorize this as. – EBGreen Sep 02 '09 at 16:04
  • 1
    However, "CSS", with around 4800 tag uses, is only 200 tag uses behind "C", so CSS questions clearly asked commonly on SO. And SO is a much better website than doctype. – Eric Sep 02 '09 at 16:17
  • CSS Questions are more prevalent here because a) So has been around longer and 2) People are slow to learn the new right way to do things. – EBGreen Sep 02 '09 at 18:15

3 Answers3

5

NB: I'm not completely sure this explanation is correct, but it seems reasonable to me.

First, let's see what the spec has to say on leading and half-leading:

Since the value of 'line-height' may be different from the height of the content area there may be space above and below rendered glyphs. The difference between the content height and the used value of 'line-height' is called the leading. Half the leading is called the half-leading.

User agents center glyphs vertically in an inline box, adding half-leading on the top and bottom. For example, if a piece of text is '12px' high and the 'line-height' value is '14px', 2pxs of extra space should be added: 1px above and 1px below the letters. (This applies to empty boxes as well, as if the empty box contained an infinitely narrow letter.)

So far, so good. So any line boxes within a div.small that have a height less than the div.small's line-height will be vertically centered with the div.small. Now let's look at the vertical-align property, specifically the middle value:

Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

Note that this is not necessarily the center of the line box! The exact position will change with your choice of font face and size. You can verify this by zooming the text larger and smaller: the size of the gap changes.

As you found, setting font-size: 0 removes the gap entirely. As the font now has no height, the line box gets a leading and half-leading of 50px, with the baseline centered vertically. To render the vertical-align: middle image, the browser sets its midpoint at that baseline, plus the x-height of the font, which is now zero. This gives a vertically-centered image.

Community
  • 1
  • 1
bcat
  • 8,833
  • 3
  • 35
  • 41
  • Thanks for explaining. So that means my solution is the only way of removing the gap? – Eric Sep 02 '09 at 16:15
  • Not quite. As it happens, `vertical-align` works differently for table cells. Inside a table cell, `vertical-align: middle` does mean "perfectly-centered with the parent row". IIRC, there's a way to get the behavior you want by using `display: table` and `display: table-cell`. Your method will have better cross-browser support, thought. Most importantly, Internet Explorer didn't even support `display: table` until version 8. – bcat Sep 02 '09 at 16:24
  • In the end, I went for a jQuery solution, as I really wanted to remove the bars down the side of the image. However, my other solution is used if the client lacks javascript. Thanks for the advice – Eric Sep 02 '09 at 17:49
1

Turns out, setting font-size:0; on the div fixes the problem. However, it still doesn't explain the gap. Anyone know what causes the gap?

Eric
  • 95,302
  • 53
  • 242
  • 374
0

I cant explain entirely what is happening but after dealing with same problem, it appears it had something to do with the way I was declaring font property in css, e.g.

font:11px/1.35em Verdana, Arial, Helvetica, sans-serif;

= bad for tables apparently. -- I removed that declaration and instead used font-size:11px, line-height:px, font-family, etc, and it fixed the gap!

thrice801
  • 1,671
  • 5
  • 23
  • 31