html - 删除填充底部高度 :auto

Question

我遇到了一个发生在 css 编码上的问题。在这个问题上我真的需要帮助。简而言之，我有一个用于图像的 div，这也是我想要用于滑动横幅的 div。但是，我想知道如果我将高度设置为自动，为什么 div 中的图像下方会有填充(我将高度设置为自动是因为我想制作响应式布局)。无论我如何为图像的 div 设置 0 填充，它都不会起作用。我提供了一个链接来查看图像或查看实时站点。附件链接http://www.ncc.my/resources/padding-issue.jpg或网站链接 http://www.ncc.my (此网站仍在 build 中)。

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%;}
}

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

Answer 1

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

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