CODEWITHSUNDEEP
css
Chris
Chris

Reputation: 3817

Why does container div insist on being slightly larger than IMG or SVG content?

I'm trying to produce yet another lightbox as much needed HTML/CSS/Javascript practice, but I've encountered a styling issue that looks trivial (and probably is!) but I just can't solve it.

I have a div that contains an img. No matter what I try (border, margin, padding, auto height etc.) I just can't make the div shrink to match the image dimensions. I've reduced the problem to this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <title>Layout experiments</title>

        <style type="text/css">
            #lightbox {
                margin: 0;
                padding: 0;
                position    : fixed;
                left        : 50%;
                margin-left : -320px;
                top         : 100px;
                border-radius: 22px;
                background  : #e0e0f0;
                color       : #102020;
            }

            #lightbox img {
                border-radius: 15px;
            }
            .imagebg {
                margin      : 7px;
                background  : black;
                border-radius: 15px;
                height      : 100%;
            }

        </style>

    </head>
    <body>

        <div id="lightbox">
            <div class="imagebg">
                <img src="picture.jpg">
            </div>
        </div>
    </body>
</html>

'picture.jpg' is 640x400, but the container div wants to be 640x404, the difference showing itself as a black strip below the image. The div exists so that I can fade the image to black by blending it's opacity down to 0, swap it, then blend it back in.

I've looked at the computed styles in multiple browsers and can't see where the 4px delta is coming from.

Upvotes: 100

Views: 48425

Answers (6)

mimo
mimo

Reputation: 6817

Apart from other working answers, setting display property of parent to flex worked for me as well:

.imagebg { display: flex }

Upvotes: 6

sbeliv01
sbeliv01

Reputation: 11820

Trying adding:

img { display: block; }

to your CSS. Since an <img> is an inline element by default, its height is calculated differently as related to the default line-height value.

On inline elements, the line-height CSS property specifies the height that is used in the calculation of the line box height.

On block level elements, line-height specifies the minimal height of line boxes within the element.

Source: https://developer.mozilla.org/en/CSS/line-height

Upvotes: 213

smnmnkr
smnmnkr

Reputation: 195

try adding: 

vertical-align: middle;

This is used in google material design lite for removing the gap between audio, canvas, iframes, images, videos and the bottom of their containers.

Material Design Lite: https://getmdl.io

Github discusion: https://github.com/h5bp/html5-boilerplate/issues/440

Upvotes: 16

Denis Seletkov
Denis Seletkov

Reputation: 47

If you don't want to change display of the element, try

margin-bottom: -4px;

Upvotes: -5

Subhajit
Subhajit

Reputation: 1987

Basically you are getting this error on IE, though you hve not mentioned but this is the fact. IE generates some extra space below the <img> tag. Hence its a good practice to make the images img { display: block; }.

EDIT: You can say its a bug of IE

Upvotes: -1

Joseph Silber
Joseph Silber

Reputation: 219930

Your image is using the line-height of its parent. Try this:

.imagebg { line-height: 0 }

Upvotes: 31

Related Questions