html - div 内的文本和 iframe 之间的间距

Question

我有时有点“强制症”，所以这真的很困扰我。

http://music.george-b.co.uk是我正在处理的网站。

我有两个 div。两者都包含一些文本(除了颜色之外格式相同)和一个 iframe。问题是第二个 div 文本在 iframe 上方比另一个 div 更高。两个 div 的代码是这样的:

Div 1(正常间距)

<div class="omot">
    <h1>One Mic One Take</h1>
    <iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/287376712&amp;color=00cc11&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
  </div>

Div 2(间距不正确)

<div class="xprtd">
    <h5>XPORTED</h5>
    <iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/295617923&amp;color=ff0000&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
  </div>

虽然一个文本是 h1 而另一个是 h5 它们的格式与 css 相同(除了形式颜色)。我真的希望间距相同。如果有人能帮我解决这个小问题，但真的很烦人，我将不胜感激。

谢谢

Answer 1

第二个文本 block (h5) 的边距值与第一个文本 block (h1) 不同。 h1 前后边距为 0.67em 而 h5 前后边距为 1.67em。您可以通过浏览器开发工具检查元素来检查这一点。

一种解决方案是手动添加 css 规则，使边距相同。或者将 h5 更改为 h1，反之亦然。