谷歌iframe'在底部引起额外的填充

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,但我无法弄清楚是什么导致底部的额外填充尽管偶数填充我给了IE

padding: .5em;

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

骗子在这里

Answer 1

iframe有display:inline;默认情况下,它就像一个字母.例如,当你有a信时,信中有一些空格.但是,您可以使用以下解决方案:

1- vertical-align:bottom; Jsfiddle

2- display:block; Jsfiddle

要么 ..

这是显示额外空格(2px)的图像.

的jsfiddle