divタグに正体不明の余白が含まれてしまう

header-logoというdivタグの括りの中に、256×50の画像のみを挿入しました。
表示上、画像に関しては256×50(border/padding/marginなし)のサイズで画面で表示されているのですが、
header-logoの大きさを検証で確認してみると、256×58となっていました。(こちらもborder/padding/marginなし)

何故header-logoのheightが8px多くなってしまうのでしょうか？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <div class="container">
                <!-- header-logoの大きさが256*58となる。(padding/border/margin は0) -->
            <div class="header-logo">
                
                <!-- 256*50の画像を挿入　画面上に同サイズで表示される -->
                <img src="img/logo.png" alt="">
            </div>
            <div class="header-list">
                <ul>
                    <li>A</li>
                    <li>B</li>
                    <li>C</li>
                </ul>
            </div>
        </div>
    </header>
</body>
</html>

body{
    font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    background: #ffffff;
    color: #555555;

}
.container{
    width: 980px;
    margin: 0 auto;
}
.header-logo{
    background-color: yellow;
    float: left;
    
}
header{
    height: 70px;
    background-color: red;
}
.header-list{
    float: right;
}
.header-list li{
    display: inline-block;
}

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1.header-logo img {
2    display: block;
3}

投稿2019/08/20 17:26

編集2019/08/20 17:26

kei344

総合スコア69398

Silky

2019/08/20 18:37

ありがとうございました！問題修正しました。しかし、なぜimgタグをinlineからblock要素に変更させることで親要素のheader-logoの不思議な余白はなくなるのでしょうか？？

kei344

2019/08/20 18:51

インライン要素にはベースラインがあり、それの分だけ空間が開きます。（なのでラインハイトを1にしても多分消える）

yoshinavi

2019/08/21 00:25

kei344様インライン要素のままで対応する場合は「line-height: 1;」より、「vertical-align: bottom;（又はtop）」の方が適切かと思います。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

divタグに正体不明の余白が含まれてしまう

関連した質問