why is this container div taller than required to wrap the image it contains?

Question

I am wondering why there is vertical space between the bottom borders of the image and containing div in the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><html xmlns:fb="http://www.facebook.com/2008/fbml"><!--facebook-->
<head><meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>test</title>

<style>

    .box {
        border:1px solid black;
    }

    .image {
        border:1px solid red;
    }

</style>

</head>

<body>
    <div class="box">
        <img class="image" src="http://i.imgur.com/o2udo.jpg" />
    </div>
</body>
</html>

You have an HTML 4.01 Doctype, but the rest of the document is a multi-namespace XML document. That doesn't make a lot of sense. — Quentin, Dec 15 '11 at 15:03
Given that you are mixing namespaces, you should use a DTD that includes the elements you are using from both. — Quentin, Dec 15 '11 at 15:17

score 59 · Accepted Answer · answered Dec 15 '11 at 15:02

Images are, by default, inline-replaced elements. This means they are treated like characters.

Some characters (such as p and q) have descenders. Some (such as a and d) do not. Images are akin to the latter.

There needs to be space below the line for the descender to descend into. That is the gap you are seeing.

You can make an image display: block or adjust its vertical-align property to change this.

why is this container div taller than required to wrap the image it contains?

1 Answers1

Linked