0

私は基本的な HTML と CSS をいじっているだけで、この問題に遭遇しました。画面の上から下に表示される2つの画像が互いに直接重なっています。2 つの画像を分離する白い線がある理由がわかりません。画像を強調表示すると、2 番目の画像の間隔は同じですが小さいため、最初の画像に接続されていると思います。

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 に答える