Take the 2-minute tour ×

I've been making websites for a few years now, but only recently have I started using the html5 doctype and today I discovered the behaviour where a padding-bottom of 4px is added to images.

The padding disappears if you change the doctype to xhtml1.0

here is the simple example:

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
html, body {
#contain {
width: 900px;

<div id="contain">
<img src="images/head.gif" width="900" height="100" border="0" alt="head">

changeing the doctype to any of the others removes the bottom-padding (green from the background)

Quite a few people have come on here to suggest the fix


I believe there is another fix that works as well.

Or should I say "work-around"

but surely this is a bug with the html5 doctype?

who do we speak to about it? who deals with a bug like this? how do we get it fixed?

Does anybody here know how to get this fixed?

share|improve this question
add comment

3 Answers

up vote 1 down vote accepted

It's not a bug, it's what the CSS spec says should happen. It's not HTML5 specific, the HTML 4.01 strict and XHTML 1.0 strict doctypes will do the same thing.

It's not padding - it's the consequence of the computed height of the line box.

There's no hope of getting it changed, Too many web pages depend on the existing behaviour.

The appropriate authority for this is the W3C CSS working group.

share|improve this answer
Thanks for your answer. I have scoured the net for this for weeks, but you answered exactly what I was after. I must say that I find a lot of css counter-intuitive and hard to get my head around, even after working with it for years. I have now included img{display:block;} as part of my normal css reset. –  Almeister9 Nov 22 '12 at 20:07
add comment

I had an issue where page was showing padding in bottom of page

img { display:block ; } 

writing above in css file solved my problem. Hope this help

share|improve this answer
add comment

Use the vertical-align property in your css :

share|improve this answer
Thanks for sharing your work-around. It doesn't answer the question though. –  Almeister9 Nov 22 '12 at 12:04
From what I can see, the popular work-around is img{display:block}. I still don't see why we need a work around. I'm just trying to find out how we get this addressed, and who by. –  Almeister9 Nov 22 '12 at 12:06
add comment

Your Answer


