CODEWITHSUNDEEP
htmlcssimagelayout
Tecman
Tecman

Reputation: 3009

<div> with image has a bigger height than expected

Here is an HTML code to reproduce the problem:

<!DOCTYPE html>
<html>
    <body>
        <div style="width:800px; margin:0 auto;">
            <img src="logo.gif" width="100" height="40" />
        </div>
    </body>
</html>

When it is rendered in a desktop browser, the height of the only <div> becomes 45 pixels but not 40 as I expect (tested this in IE11 and Opera Next v20). logo.gif is 100x40, and the situation remains the same even if I apply zero border through CSS to the <img> tag (border, border-width, etc).

Why does it happen and how to fix it?

Upvotes: 8

Views: 6257

Answers (4)

ioCron
ioCron

Reputation: 963

The only way I found to fix this problem correctly without height hacks, etc. is to set the container to line-height:0; (see demo example below).

.image { background:red; }
.image-fix { line-height:0; }
Image without Fix: 
<div class="image">
  <img src="http://via.placeholder.com/100x100" alt="">
</div>

<br>

Image with Fix: 
<div class="image image-fix">
  <img src="http://via.placeholder.com/100x100" alt="">
</div>

Upvotes: 1

K2A
K2A

Reputation: 182

This is not a issue , you just need to write a correct CSS. Try

height:40px;display:block; for div tag and keep margin:0,padding:0 Thats all...

Upvotes: -1

Tecman
Tecman

Reputation: 3009

I believe it is not a bug as it is rendered the same way in all major browsers. The problem is fixed if we set just the display:block style. Without this, the image is rendered as an inline element, and its bottom border is aligned to the so called text baseline.

Let's change our code to demonstrate this:

<!DOCTYPE html>
<html>
<body style="background-color: #FFFF99;">
<div style="width:800px; margin:0 auto; background-color: #00CCFF;">
<img src="logo.gif" width="100" height="40" style="border: 3px solid black;" />
Some text yyy qqq
</div>
</body>
</html>

The result is the following:

enter image description here

As you can see, the extra space is needed to render the text without clipping!

I found a confirmation of that in the well-known book by Eric Meyer CSS: The Definitive Guide - in the section dedicated to alignment, when it describes the {vertical-align: baseline} attribute for the <img> tag. Here is the corresponding excerpt:

This alignment rule is important because it causes some web browsers always to put a replaced element's bottom edge on the baseline, even if there is no other text in the line. For example, let's say you have an image in a table cell all by itself. The image may actually be on a baseline, but in some browsers, the space below the baseline causes a gap to appear beneath the image. Other browsers will "shrink-wrap" the image with the table cell and no gap will appear. The gap behavior is correct, according to the CSS Working Group, despite its lack of appeal to most authors.

Upvotes: 15

Dave
Dave

Reputation: 8471

Same issue in FireFox and IE and Chrome.

You can fix this with a hack and add a Height:40px; to your div (I had to use an image to with the same width/height as your logo so don't be surprised that I have a different picture)

<div style="width:800px; margin:0 auto;border:solid;height:40px;">
    <img src="http://a2.mzstatic.com/us/r30/Video/16/96/5f/mzi.rxlappss.100x100-75.jpg" width="100" height="40" />
</div>

Or, add some CSS to your image tag and keep the original code as is (will affect all images which may not be desirable) 

img {padding:none;margin:none;display:block;}

http://jsfiddle.net/h6wrA/

Or, you can do this for only certain images with http://jsfiddle.net/h6wrA/2/

Upvotes: 3

Related Questions