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

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

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;
}
imgタグ隙間修正

現象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>
imgタグの下の隙間

修正方法1

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

#img-container {
    border: solid 1px #212121;
    display: block;
    height: 0;
    padding: 0;
}
imgタグの下の隙間を解消

修正方法2

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

#img-container {
    border: solid 1px #212121;
    display: block;
    height: 240px;
    padding: 0;
}
imgタグの下の隙間を解消
このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です