css - 为什么 padding right 不起作用？

Question

我想在 iframe 周围添加填充，但出于某种原因，我无法让它在每一侧均匀地应用填充。

.container {
width: 980px;
margin: 0 auto;

.content {
padding-top: 100px;
margin: 0 auto;

iframe {
padding: 20px;

<div class="content">
        <div class="container">

        <iframe width="100%" height="500" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/468897489%3Fsecret_token%3Ds-lEQFX&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>

        </div>
    </div>

Mobile Version

Answer 1

iframe 上的填充始终是相同的。它是容器和 iframe 的组合，其填充使 iframe 比应有的更靠右。

要做到这一点，您可以在包含 iframe 的 div 上设置填充，而不是 iframe 本身。

https://codepen.io/koohiisan/pen/mjmJNj

.container {
width: 980px;
margin: 0 auto;
}

.content {
padding-top: 100px;
margin: 0 auto;
}

iframe_container {
padding: 20px;
}
<div class="content">
        <div class="container">
        <div class="iframe_container">
        <iframe width="100%" height="500" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/468897489%3Fsecret_token%3Ds-lEQFX&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
          </div>
        </div>
    </div>