画像の下にスペースが生じる

divタグの中にimgタグで画像を挿入した場合、divタグのmargin, paddingを0に、imgタグのmargin, paddingを0にした場合、imgタブの高さに親要素のdivタブの高さは一致すると予想しましたが、実際は、imgタブの下にスペークが生じてしまいました。（divタグの高さの方が高い）どうしてでしょうか？

HTML

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="reset.css">
</head>
<body>
    <header>
        <div class="main_1">
            <div class="container">
                <img src="#">
            </div>
        </div>
    </header>

CSS

.container {
    width: 900px;
    margin: 0px auto;
    padding: 0px 0px;
}

img {
    width: 30px;
    height: 70px;
    margin: 0px 0px;
    padding: 0px 0px;
}

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

回答1件

ベストアンサー

imgはインライン要素なので、既定のline-heightが影響しているのでしょう。
親要素に line-height: 0;を追加するか、imgに display: block;を追加してブロックレベル要素にすればいいでしょう。

css
1.container {
2  width: 900px;
3  margin: 0px auto;
4  padding: 0;
5  background-color: gray;
6  height: max-content;
7  line-height: 0; /* 追加 */
8}
9
10img {
11/* display: block; または、これを追加*/
12  width: 30px;
13  height: 70px;
14  margin: 0;
15  padding: 0;
16}