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

      2018/06/13

こんな感じで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タグ隙間修正

 - CSS