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而不是iframe本身的div上设置填充。

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>

Answer 2

据我所见，这是因为iFrame上有内联CSS，所以它忽略了外部CSS的填充样式。尝试将宽度和高度的填充添加到嵌入式CSS中，它应该可以工作。

为什么正确的填充无效？

2 个答案: