从嵌入内容中删除不需要的边距/填充答案

【问题标题】：Removing unwanted margin / padding from embedded content从嵌入内容中删除不需要的边距/填充
【发布时间】：2012-11-18 22:43:53
【问题描述】：

我在我的页面上的图像下方嵌入了一个 SoundCloud 小部件。

图像底部和小部件顶部之间有一个小空间。我已经使用 Web Inspector 来追踪这个差距的来源，但我找不到它。我想删除这个空间。

代码很简单：

<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Image-New_Delhi_Lotus.jpg">
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F66379982?"></iframe>

查看实际代码：http://jsfiddle.net/LAn3A/

我什至无法判断这个间隙是由边框、填充还是边距引起的。我确信它来自 SoundCloud 小部件。

【问题讨论】：

嵌入式 iframe 通常不添加填充/边距。可能是您的 CSS 添加了边距或填充。在这个沙盒网站中查看您的代码：jsbin.com/ulotun/1/edit 小部件周围没有边距。
在您刚刚发布的网站的代码中，实际上是小部件周围有一个空格。仔细查看小部件上方！ i.imgur.com/jdyKf.png
所以内边距不在 iframe 周围

标签： html css margin padding soundcloud

【解决方案1】：

当您尝试将内联元素靠近块级元素时，可能会发生这种情况。诸如 line-height 之类的文本属性会妨碍您。通过将图像设置为块级元素来修复它：

img { display: block;}

【讨论】：

太棒了！你解决了。对于奖励积分，您能解释一下为什么会发生这种情况吗？
图片是一个内联元素，也就是说你可以把它想象成一行文本中的一个字母或一个词。有一些 CSS 属性会影响内联元素，例如 line-height、vertical-align（都设置在父元素上）以及它们的布局方式。所以在这种情况下，父元素上设置的默认行高会影响包含图像的行。