不应该存在的图像之间的空白间距答案

【问题标题】：White spacing between images that shouldn't be there不应该存在的图像之间的空白间距
【发布时间】：2013-04-23 18:33:51
【问题描述】：

我只是在搞乱基本的 HTML 和 CSS 并遇到了这个问题。我有两个直接在彼此之上的图像，它们从屏幕顶部和向下出现。我不明白为什么有一条白线将两个图像分开。我认为它与第一张图片相关联，因为第二张图片的间距相同但更小，如果您突出显示图片。

HTML：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Christdentity</title>
        <link rel="stylesheet" href="style.css">
        <script type="text/javascript"></script>
    </head>
    <body>
        <img class="logo-banner" src="images/christd_logo_banner.jpg">
        <img class="logo-banner-dark" src="images/christd_logo_banner2.jpg">
    </body>
</html>

CSS：

body {
    margin: 0;
}

img.logo-banner {
    width: 100%;
    min-width: 600px;
    height: 40px; 
    padding-bottom: 0; 
}

img.logo-banner-dark {
    width: 100%;
    min-width: 600px;
    height: 20px;
    padding-bottom: 0;
}

jsfiddle：http://jsfiddle.net/Sederu/nQe7F/

【问题讨论】：

标签： html css

【解决方案1】：

将display: block; 添加到<img>，因为默认情况下它们是replaced inline elements

img.logo-banner {
display: block;
width: 100%;
min-width: 600px;
height: 40px; 
padding-bottom: 0; 
}

img.logo-banner-dark {
display: block;
width: 100%;
min-width: 600px;
height: 20px;
padding-bottom: 0;
}

http://jsfiddle.net/nQe7F/2/

另请看：Eliminate vertical whitespace between images

【讨论】：

这些空格是由vertical-align:baseline 引起的，而不是由标记中的空格或回车引起的。
删除了我回答的那部分 - 感谢您指出这一点！
你能把一张图片放在一张有 display: block 的图片上面吗？
@SethUrquhart：像这样？ jsfiddle.net/nQe7F/6 .. 注意我在第一张图片中添加了vertical-align: bottom;
不，什么也没做