为什么填充正确不起作用？
为什么填充正确不起作用？
提问于 2018-07-24 03:20:45
我想在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>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-24 03:43:28
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>Stack Overflow用户
发布于 2018-07-24 03:32:02
据我所知，这是因为你的iFrame上有内联CSS，所以它忽略了你的外部CSS的填充样式。尝试将填充添加到具有宽度和高度的内联CSS，它应该可以工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51485845
复制相关文章
相似问题