【 iframe 】Google マップの埋め込み時の、下側の余白を消す方法

今回は、Google マップ【 iframe 】を埋め込んだ時に、要素の下側にできる謎の余白を消す方法をご紹介します。

CSSに一行だけ記述してください。

iframe {
  vertical-align: bottom;
}

/* こちらの方法でも、謎の余白を消すことが可能です */
iframe {
  display: block;
}

インライン要素関係に発生する、謎の余白は、だいたい上記のCSSの記述で対応することができます。

個人的には、毎度CSSに記述するより、ある程度の雛形として使い回したいため、【 img 】タグと、【 video 】タグとセットで、要素の下側にできる謎の余白を消しております。

iframe {
  vertical-align: bottom;
}

video {
  vertical-align: bottom;
}

img {
  vertical-align: bottom;
}

短いですが、今回は以上です。