0

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

4

1 回答 1

4

添加display: block;到默认情况下<img>它们被替换为内联元素

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/

另请看：消除图像之间的垂直空白

于 2013-04-23T18:36:59.360 回答