图像出现下的神秘差距

jef*_*kee 5 html css image

可能重复:
锚标记底部的空白区域

在这里查看此示例页面.. 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>
Run Code Online (Sandbox Code Playgroud)

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;
}
Run Code Online (Sandbox Code Playgroud)

Ada*_*tau 5

试试这个:

#index_content img{
padding: 0px;
border: none !important;
margin: 0px;
clear: none;
display: block;
}
Run Code Online (Sandbox Code Playgroud)

  • 答对了.工作就像一个魅力.所以基本上我只是缺少"display:block;"?重要的 部分没有区别或包含... (2认同)
  • 使用`!important`是一个可怕的习惯. (2认同)