Home/ Questions/Q 8964077
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T16:30:15+00:00

I can’t seem to figure out why this extra 5px is showing up at

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0