imgタグの下にできる隙間を消す

2017.03.18 2021.03.06

こんな感じでimgタグの下に隙間が出来てしまう場合の解決方法です。

css

img.attachment-full {
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

html(抜粋)

<div class="home">
    <img width="1632" height="1224" src="sample.jpg"
        class="attachment-full wp-post-image" alt="" />
    <article class="shadow-box">
        <h2>Hello world!</h2>

修正方法

imgタグがインライン要素(厳密には異なる)のため、現象が発生しています。
なので、下記のようにブロック要素を指定します。

css

img.attachment-full {
    max-width: 100%;
    height: auto;
    display: block;
}

現象2

2020年07月14日追記

上記の方法でも隙間が消えないケースがありました。具体的には次のような構成のとき。display指定の入れ子が関係しているのかな？

<!doctype html>
<html>
<head>
    <meta charset="charset=UTF-8" />
    <style>
        html,
        body {
            background-color: #000;
            margin: 0;
        }

        #img-container {
            border: solid 1px #212121;
            display: block;
            padding: 0;
        }

        .sample-image-class {
            display: block;
            height: 240px;
            width: 320px;
        }
    </style>
</head>
<body>
    <div id="img-container">
        <div style="position: relative; display: inline-block;">
            <img src="001.jpg" class="sample-image-class">
        </div>
    </div>
</body>
</html>

修正方法1

次のように外側のブロックの高さを0にすれば、隙間はなくなります。ただし、ボーダー指定があるとボーダーが内側のブロックを囲んでくれません。

#img-container {
    border: solid 1px #212121;
    display: block;
    height: 0;
    padding: 0;
}

修正方法2

ボーダーを指定したい場合は、次のように外側のブロックの高さを内側のブロックと同じにすることで隙間がなくなります。

#img-container {
    border: solid 1px #212121;
    display: block;
    height: 240px;
    padding: 0;
}

コメントコメントをキャンセル

Flexboxレイアウトで文字列が折り返さない場合の解決方法

アコーディオンメニューの作り方

imgタグの下にできる隙間を消す

修正方法

現象2

修正方法1

修正方法2

関連記事

コメント コメントをキャンセル

コメントコメントをキャンセル