DIVの中にiframeを表示させると、何故か下に隙間ができる件

DIVの中でiframeを使う…。

サイト作っているとこの様な状況は多々あるわけでして…。

今回、具体的にはDIVで囲ったコンテナ内にiframe、Googlemapの埋め込みタグで地図を表示させたのですが、何故か下に数ピクセル程度の隙間が発生してしまう。

ちょっと詳しくは調べてないのですが、バグでしょうかね？

という事で、この隙間を埋めてやる方法はCSSで簡単に定義できます！

例として、#hogehoge　というdiv内にiframeを使う場合の対処法で記載します。

div#hogehoge iframe {
    vertical-align: bottom;
}

この1行でOKです！

できるポケット HTML5&CSS3/2.1全事典 著：小川 裕子 , 他