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

このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

関連コンテンツ

スポンサードリンク

Comment

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