iOS環境のみでdiv要素の下に謎の余白ができる

カテゴリ：iOS対策

この現象は主にdiv要素内にimg要素がある場合に発生します。

原因

iOSはimgなどのインライン要素に対して、親要素の下部にテキストのベースラインを自動で作成してしまうことが原因です。そのため、以下のような構造の場合、div要素の下に余白ができます。

<div>
    <img src="img.png">
</div>

img要素に以下のいずれかを設定します。

imgをインラインではなくブロック要素にします。

div img {
    display: block;
}

または

画像を下揃えにしてベースラインを無効化します。

div img {
    vertical-align: bottom;
}

悩ましいのはvertical-align: bottom;を設定するとdiv内のimgが下揃えになってレイアウトが崩れてしまう可能性があることです。そのため、display: block;を設定してブロック要素化する方がお勧めです。

公開日時：2026年06月14日 13:07:07
最終更新日時：2026年06月14日 13:57:48