图像下出现神秘间隙[重复]答案

【问题标题】：Mysterious gap under image appearing [duplicate]图像下出现神秘间隙[重复]
【发布时间】：2012-06-18 22:23:44
【问题描述】：

可能重复：
White space at bottom of anchor tag

在此处查看此示例页面.. http://denise.brixwork.com/

出于某种奇怪的原因，在该家庭的那张照片下，在包含该图像的灰色边框 (5px #333) div 之前有一个间隙。我删除了所有边距、填充等，但它仍然不会消失。 :(

没有在 #index_content div 上设置固定高度，我不希望以后必须重新调整图像大小（这意味着我的工作量加倍），我如何在离开时消除该间隙它有弹性吗？

我的 HTML 代码：

<div id="index_content_container">
    <div id="index_content">
        <img src="http://denise.brixwork.com/images/index_photo.jpg" alt="Real Whistler Living - Real Estate for the Next Generation" />
    </div>
    <div class="clear"></div>
</div>

CSS：

/* INDEX PAGE SPECIAL CSS */
#index_content_container {
    position: relative;
    width: 970px;
    border: 5px solid #e1bb14;
    left: -20px;
    display: block;
    float: left;
    padding: 0px;
    margin: 0px;
}

#index_content {
    position: relative;
    width: 960px;
    border: 5px solid #333;
    float: left;
    display: block;
    padding: 0px;
    margin: 0px;
}

#index_content img {
    padding: 0px;
    border: none;
    margin: 0px;
    clear: none;
}

【问题讨论】：

这是什么<div class="clear"></div>？
是一种清除机制，通常用于避免包含的 div（例如带边框的 div）在内部内容可见时折叠到 0 高度。还可以作为
的干净且兼容的
等效项，而无需做额外的工作。
Quentin - 我的 HTML 中没有锚标记。
@jeffkee - 对于“锚标签”，请阅读“某些元素”