画像の下に出てきた開いている部分をなくしたいです。

Question

img下の空白の部分が消したいです。

画像の下に空いている部分ができてしまっています。
この空いている部分を消したいです。
header要素の下では背景を黒にしたのですが、画像と黒の間に白の線があります。この部分をなくす方法を教えてください。
助けてください。

該当のソースコード

<header>
            <div class="logo">
                <h1>○○大学</h1>
                <h2>ハンドボール部</h2>
            </div>
            <img　src="image/IMG_5157.JPG" width="100%" height="auto">
        </header>

header{
    position: relative;
    border-bottom:10px solid rgb(166, 182, 23);
}
.logo{
    display:inline-block;
    float: left;
    text-align: center;
    position:absolute;
    padding:5px;
    font-size:60%;
    color:white;
    font-weight: bold;
}

.logo h1{
    margin-bottom: 0;
}
.logo h2{
    margin-top: 0;
}

試したこと

「検証」で確認したところその白い部分は header 内でした。
画像部分ではありません。paddingもmarginもすべてありませんでした。

borderラインを画像につけてもラインの下に白が出てきました。

Comments

[tokita.]

Chrome ver 78
IE ver 11
において再現しませんでした。
.top-imgのcss設定が公表されていないので、それも書いていただけるとよいかと思います。

またやりたいことが「トップ画像の下に緑の線を表示する」事なのであれば
border-bottom:10px solid rgb(166, 182, 23);
をheaderでなく.top-imgで指定する場合を試行してみてください。

[tokio-k]

すみません　クラス名の消し忘れです。何もついていません
top-img につけてやってみましたがそれでも白い線が下に出てきました。記載漏れすみません

Answer 1

1番よく使われる解決方法はimgのdisplayにblockを設定する方法です。

.top-image {
  display: block
}

Comments

[tokio-k]

できました。ありがとうございます。出てきてた白の線はなにですか？
なぜブロックにすると直るのですか？

[kyoya0819]

画像は初期でdisplay:inlineなのでblockを指定しなかった場合、配置されるのがbaselineになるためです。

ここら辺はvertical-alignの分野です。
なので配置をbottomにしても余白をなくせます。

vertical-alignについては
http://www.htmq.com/style/vertical-align.shtml
がわかりやすいと思います。