why does this div leave a margin at the bottom

Question

I am currently in learning CSS and it seems I have a hard time understanding the box model. I have a very simple page layout:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="css/simpleimagebrowser.css">
</head>
<body>
<menu type="toolbar">
    <ul>
        <li>prev</li>
        <li>next</li>
    </ul>
</menu>
<div class="imagecontainer">
    <img src="images/awsome.jpg">
</div>

</body>
</html>

and a very simple css:

body
{
    margin: 0;
    padding: 0;
}
menu
{
    padding: 0;
    margin: 0;
    background: green;
}
ul
{
    padding: 0;
    margin: 0;
}
li
{
    display: inline;
}
img
{
    padding: 0;
    margin: 0;
}
.imagecontainer
{
    background: yellow;
    padding: 0;
    margin: 0;
}

Why is does my yellow <div> have this little margin or gap at the bottom?

I noticed that when I set the font-size to 0 that margin goes away. Can someone explain conceptually what's going on from a css/boxmodel perspective? It seems as if the browser is adding a blank text line below the image or something ...

enter image description here

Not sure if this has anything to do with it but you didn't close your img tag. It should be self closing with /> at the end of it. — HK1, Apr 25 '13 at 20:45
I think in html5 land this is not necessary: http://stackoverflow.com/questions/10598501/closing-tags-in-html5 — bitbonk, Apr 25 '13 at 20:46
Have you tried setting you body or that image container ( whatever contains that yellow ) height to 100% ? — InspiredBy, Apr 25 '13 at 20:48
This is not a duplicate of http://stackoverflow.com/questions/10612380/get-rid-of-space-underneath-inline-block-image I am not asking how to get rid of it (as I mentioned, I already now a solution), I am asking for an explanation why this happens: — bitbonk, Apr 25 '13 at 20:51

score 2 · Answer 1 · answered Apr 25 '13 at 20:45

2

Add display: block; to your image

img {
    display: block;
}

The white space is due to the image being an inline element. I suppose it's the equivalent of line-heightwhich adds white space around text.

answered Apr 25 '13 at 20:45

Turnip

35,836
15
89
111

Yeah, but why is there an extra space under an inline element ? – Milche Patern Apr 25 '13 at 21:00

Milche Patern · Answer 2 · 2013-04-25T23:26:33.733

1

This is because all inline elements are expected to fit the 'contains text' model of a span tag, where space is reserved for the tails on letters like g, q, j, etc.

If non, this extra-space is used for 'link underlining' by default browser settings on inline level elements. Meaning, it reserves space for a link hover underline.

tail (n: tel)

Of a letter, the part that extends below the baseline and to the right, as gjqy. Of the capital letters, Q and R have tails, though they need not extend below the baseline.

edited Apr 25 '13 at 23:26

answered Apr 25 '13 at 20:56

Milche Patern

19,632
6
35
52

Is there a special CSS property for this "link underlining", so I could turn it off? – bitbonk Apr 25 '13 at 21:18

score 0 · Answer 3 · answered Apr 25 '13 at 20:51

0

Indeed, adding "display: block;" to your img rule will make the problem go away. This is most likely due to images being treated as "inline" or "inline-block" by default. Thus the browser is very likely attempting to work your image into the line-height of the parent element.

answered Apr 25 '13 at 20:51

Mark W Dickson

84
4

You took too long for accepting modifications, i posted the answer myself. – Milche Patern Apr 25 '13 at 21:01

why does this div leave a margin at the bottom

3 Answers3