删除 height:auto 的底部填充

Question

我遇到了 css 编码发生的问题。在这个问题上我真的需要帮助。长话短说，我有一个 div 的图像，这是我想要的滑动横幅的 div以及。但是，我想知道如果我将高度设置为自动，为什么 div 中的图像下方会有填充（我将高度设置为自动因为我想制作响应式布局）。无论我如何为图像的 div 设置 0 填充，它都不起作用。我提供了 link 来查看图像或查看实时站点。 Link 到附件 http://www.ncc.my/resources/padding-issue.jpg or link to site http://www.ncc.my（此网站仍在建设中）。

我的 div 的 css 代码是：

#contentContainer .slides {width:1140px; height:auto float:left; background:#666;}
#contentContainer .slides img {width:100%; padding:0; margin:0; border:0;}

@media screen and (max-width: 850px)
{
#contentContainer .slides {width:100%;}
}

如果我将高度设置为我想要的指定高度，布局就完美了。但是，当我再次将高度设置为auto时，肯定会出现如附件所示的问题。解决这个问题的任何解决方案？非常感谢！

Answer 1

也许尝试设置 height:100% 而不是自动。这个答案更像是在黑暗中拍摄我不确定它是否会成功。

Answer 2

您需要在图片上添加 display: block。所以你的 CSS 将是

#contentContainer .slides img {
    width: 100%;
    padding: 0;
    margin: 0;
    display: block; /* Add this */
    border: 0;
}

删除 height:auto 的底部填充

Remove padding bottom for height:auto

html

css

padding