CSS / div with width 100% is a few pixels too high / why?

Question

I want to build a website that scales to the browsers width.

It all works fine, except that the parent-div containing the 100%-width-divs is always about 5 pixels too high. That gives me huge problems because of the background color (e.g. blue) spilling out at the bottom.

Why is that? And how to solve? :-)

Kind regards, Jan

head code:

<style type="text/css">

body { background-color:#e7e3d7; margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; }    
.banner { width: 100%; }

</style>

body code:

<div style="background-color:#0000ff;">

<div><img class="banner" src="http://www.janriggert.com/images/footer.png"></div>

</div>

Do you see that blue line below the footer? It shouldnt be there... :-/

I checked BBEdit & Safari. Can you duplicate the problem? – Stormtrooper May 11 '13 at 10:03 — Stormtrooper, May 11 '13 at 10:03

score 2 · Accepted Answer · answered May 11 '13 at 10:11

2

Use max-width:100% and display:block on image.

Fiddle: http://jsfiddle.net/RyEqK/1/

answered May 11 '13 at 10:11

Sergej Popov

2,933
6
36
53

Wow! You deserve awesomeness! Thank you so much! :-D – Stormtrooper May 11 '13 at 10:21
@SergejPopov the question was "why?" You didn't explain (baseline, inline elements leave room for descender etc) – Mr Lister May 11 '13 at 11:19
1

@MrLister, The question was not only "why" but also "how to", I didn't know "why", so maybe you can enlighten us with separate answer. I will up-vote. – Sergej Popov May 11 '13 at 11:26
1

@SergejPopov I added the why answer. 8 years later. :) – Joshua Dance Dec 17 '21 at 16:43
1

@JoshuaDance haha. Nice. As promised - upvoted :D – Sergej Popov Feb 09 '22 at 08:27

score 1 · Answer 2 · answered Dec 17 '21 at 16:42

The accepted answer to add display:block is correct but doesn't cover the why.

<img> by default are set to display: inline;. Inline-block elements like <svg> and <img> sit on the text baseline. They are 'in a line' (hence inline) and obey the line rules.

The extra space at the bottom space left to accommodate text characters that drop below the line. They are called descenders and examples are the tail on 'y', 'g' etc.

To remove that extra space, you can add display: block; to your img.

This SO answer covers it really well for images with lots of examples.

This SO answer covers it well for svgs, which have the same inline default.

CSS / div with width 100% is a few pixels too high / why?

2 Answers2