谷歌iframe＆＃39;导致底部的额外填充

Question

我有以下HTML代码：

<div class="google-maps">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d109782.8671228349!2d76.62734023564995!3d30.69830520749905!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390fee906da6f81f%3A0x512998f16ce508d8!2sSahibzada+Ajit+Singh+Nagar%2C+Punjab!5e0!3m2!1sen!2sin!4v1449838222081"
  width="100%" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

现在我有以下CSS：

body {
  color: #fff;
}

.google-maps {
  margin: 1em 0;
  background: #000;
  padding: .5em;
}

我已经彻底浏览了HTML和CSS，但我无法弄清楚尽管我给了I.E的偶数填充，但在底部引起了额外的填充。

padding: .5em;

有人可以解释为什么我会得到这种不均匀的填充？

FIDDLE HERE

Answer 1

iframe默认情况下为display:inline;，它的作用就像一封信。例如，当您有a个字母时，字母下面会有一些空格。但是，您可以使用以下解决方案：

1- vertical-align:bottom; Jsfiddle

2- display:block; Jsfiddle

或..

这是显示额外空格（2px）的图像。

Jsfiddle

Answer 2

技术上问题不在于填充;在取代background: #000;样式的iframe之后有一个小空格。

此处存在类似问题：Unwanted Padding in IE Image Rendering in div Tag

我修改了你的小提琴并向iframe添加了一个display: block;，运行了小提琴，并且输出都很好（即不再有不均匀的填充）。 Here is that fiddle