Home/ Questions/Q 8015785
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T20:21:09+00:00

When I change my website to <!DOCTYPE HTML> Every img element that is wrapped

  • 0

When I change my website to

<!DOCTYPE HTML>

Every img element that is wrapped inside a DIV has a 3px bottom margin to it even though that margin is not defined in CSS. In other words, there are no style attributes that are causing that 3px bottom margin.

<div class="placeholder">
    <img alt="" src="/haha.jpg" />
</div>

Now let’s say haha.jpg is 50×50, and .placeholder is set to display: table. Strangely the height dimensions of .placeholder in my observation is 50×53…

Has anyone encountered this anomaly before and fixed it?

EDIT

Here is the JS FIDDLE

http://jsfiddle.net/fRpK6/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This problem is caused by the image behaving like a character of text (and so leaving a space below it where the hanging part of a “y” or “g” would go), and is solved by using the vertical-align CSS property to indicate that no such space is needed. Almost any value of vertical-align will do; I’m fond of middle, personally.

    img {
    vertical-align: middle;
}

    jsFiddle: http://jsfiddle.net/fRpK6/1/

    • 0