Question

我只是搞乱基本的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/

Answer 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

图像之间的白色间距不应该存在

1 个答案: