CODEWITHSUNDEEP
htmlcsslayout
Aloxis
Aloxis

Reputation: 87

Div height inexplicably 5px taller when containing two images side by side

I can't seem to figure out why this extra 5px is showing up at the bottom of my div when it contains two images. It does not happen when it only contains one image. I have removed all other markup and css and the problem remains. Also it happens on Chrome, Firefox, and IE.

Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <link rel="stylesheet/less" href="<?php echo THEMES_URI; ?>starter_digital/style.less" type="text/css">
    <script src="<?php echo THEMES_URI; ?>starter_digital/javascript/less-1.3.1.min.js" type="text/javascript"></script>
</head>

<body>
    <div id="social">
        <img src="<?php echo THEMES_URI; ?>starter_digital/images/facebook.png" />
    </div>

    <br />

    <div id="social">
        <img src="<?php echo THEMES_URI; ?>starter_digital/images/twitter.png" />
    </div>

    <br />

    <div id="social">
        <img src="<?php echo THEMES_URI; ?>starter_digital/images/facebook.png" />
        <img src="<?php echo THEMES_URI; ?>starter_digital/images/twitter.png" />
    </div>
</body>
</html>

Less / Css:

#social {
  background-color: red;
}

Result:

Image of the error in Chrome

Upvotes: 5

Views: 1304

Answers (2)

sbeliv01
sbeliv01

Reputation: 11840

Trying adding:

#social img { display: block; float: left; margin-right: 5px; }

or

#social { line-height: 0; }

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

Here's a fiddle: http://jsfiddle.net/5Gs3Q/

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: 9

skramer
skramer

Reputation: 67

I believe changing the line-height might fix the problem.

#social {
   background-color: red;
   line-height:normal;
}

Upvotes: 0

Related Questions