无法在我的 HTML/CSS 中找到令人讨厌的内容空白的原因？答案

【问题标题】：Unable to find the cause of an annoying content gap in my HTML/CSS?无法在我的 HTML/CSS 中找到令人讨厌的内容空白的原因？
【发布时间】：2012-07-06 15:01:44
【问题描述】：

我对 CSS / HTML 很陌生，找不到this 小虫子的原因。我希望它消失，以便横幅和导航栏相互接触。非常感谢任何帮助！

这是网站的代码。我去掉了一些不相关的代码。

               <!DOCTYPE html>
<html>



<!-- *****CSS CODE START*****-->
<style type="text/css">

#container
{
    margin: 0 auto;
    width: 900px;
    background: #fff;

}

#header
{
    margin-top: 0px;
}

#header h1 { margin: 0; }

#navigation
{
    float: left;
    width: 900px;
    background: #333;
}

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li a
{
    display: block;
    float: left;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }

#content-container
{
    float: left;
    width: 900px;
    background: #fff url(/wp-content/uploads/layout-two-fixed-background.gif) repeat-y 100% 0;
}

#content
{
    clear: left;
    float: left;
    width: 619px;
    height: 720px;
    padding: 10px 0;
    margin: 0 0 0 0px;
    display: inline;
    overflow: auto;
}

#content h2 { margin: 0; color: #003D5D; padding:10px; }

#contentBody
{
    padding:10px;
    font-size:22px;
}

#aside
{
    float: right;
    width: 280px;
    padding: 20px 0;
    margin: 0 0px 0 0;
    display: inline;
    background: #cccccc;
    height: 700px;
    border-left: 1px solid #333 ;
}

#aside h3 { margin: 0 20px; color: #003D5D; font-family: Times New Roman; }

#asideText { margin: 0 20px; font-family: Times New Roman;}

#footer
{
    clear: both;
    background: #ccc;
    text-align: right;
    padding: 5px;
    height: 1%;
    border-top: 1px solid #333 ;
}

</style>
<!-- *****CSS CODE END***** -->





<!-- *****HTML CODE START***** -->
<body>

<div id="container">
    <div id="header">

            <img src = file:///Users/jduffy/Desktop/projectSite/banner1.jpg>
            </img>

    </div>
    <div id="navigation">
        <ul>
            <li><a href="file:///Users/jduffy/Desktop/projectSite/home">Home</a></li>
            <li><a href="file:///Users/jduffy/Desktop/projectSite/theProject">The Project</a></li>
            <li><a href="file:///Users/jduffy/Desktop/projectSite/Pictures">Pictures</a></li>
            <li><a href="file:///Users/jduffy/Desktop/projectSite/Contact">Contact us</a></li>
        </ul>
    </div>
    <div id="content-container">
        <div id="content">
            <h2>
                Page heading
            </h2>
            <div id="contentBody">
            <p>
                home pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome page                home pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome page
                home pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome page


            </p>
            <p>
                test2
            </p>
            <p>
                test3
            </p>
            </div>
        </div>
        <div id="aside">
            <div id="asideHeading">
                <h3>
                Aside Heading
                </h3>
            </div>
            <div id="asideText">
            <p>
            test5
            </p>
            </div>
        </div>
        <div id="footer">

            <text id="footerDate">0</text>


        </div>
    </div>
</div>
</body>
<!-- *****HTML CODE END***** -->

</html> 


<!-- *****JavaScript CODE START***** -->
<script type="text/javascript">

/*date*/
var today = new Date();
document.getElementById("footerDate").innerHTML = today;


</script>
<!-- *****JavaScript CODE END***** -->

【问题讨论】：

请使用jsfiddle.net
为什么要将图片链接到本地网址？比如 file:///Users/jduffy/Desktop/projectSite/
这里：jsfiddle.net/uF9HR
试试这个#header { margin-bottom: -5px; }
@user1472747：值得一提的是，对于初学者来说，你做得很好。评论，缩进，看起来你已经很好地掌握了一些其他人从未掌握的基础知识。

标签： html css layout

【解决方案1】：

只需添加

#header img {
    float:left; 
}

到您的 CSS。

【讨论】：

【解决方案2】：

在您的标题 img 上使用 display: block。

【讨论】：

【解决方案3】：

ShogunArts.de 的回答 -

#header img {
    float:left; 
}

Basic Bridge 的答案 -

#header { margin-bottom: -5px; }

Guillaume86 的回答 -

#header img {
    display:block; 
}

一切都很完美！谢谢大家。

【讨论】：

【解决方案4】：

这是无效的 HTML：

 <img src = file:///Users/jduffy/Desktop/projectSite/banner1.jpg>
            </img>

应该是：

<img src="file:///Users/jduffy/Desktop/projectSite/banner1.jpg"/>

根据标记的版本/类型，可能不需要引号图像标签始终是自闭合的。

每当您遇到奇怪的布局错误时，请使用经过验证的 HTML 开始您的故障排除：

http://validator.w3.org/

【讨论】：

谢谢！我不知道。
好评论但不是答案，修复 html 不修复内联元素间隙行为