iframeで要素を埋め込んだとき、
下の要素とピッタリつけたかったのに何故か隙間が空いていることに気づきました。
探ってみると、盲点すぎる原因でした。
iframeタグは、インライン要素
早速ですが、下に、iframeの下にdivを配置したHTMLのレイアウトを、左右に2つ並べています。
見比べると、左はiframeの下に余白が開いているのに対して、右はiframeと赤い要素がピッタリくっついています。
See the Pen iframeの下に謎の余白が空く問題 by nico (@etsuko-kobanawa) on CodePen.
cssを確認すると、.block（右）のiframeにはdisplay: block;が付与されています。
そう、iframeタグってインライン要素だったんですね。
ブロック要素の性質を持たせるだけで余白が消える、という単純な話でした。
あんまり使いたくないんだけどたまに使わざるを得ない厄介なタグ・iframeですが、ブロック要素にするだけで今までより扱いやすさがアップする気がしますね。
iframeをインライン要素として扱うケースはほぼないと思うので、余白うんぬん関係なくdisplay: block;つけちゃって良いかな、と個人的には思います。
まとめ
以上、iframeの下に謎の余白が空く問題の謎についてお伝えしました。
ちなみに、imgタグでも下に謎の余白が空きますが、imgタグもiframeと同じくインライン要素なので、今回と同じ対処法でも解決できます！
ぜひお試しください。
コメント