为何iframe外部padding不生效？如何解决该问题？

首先，你在iframe标签里写的padding="200px 200px"是无效的——HTML标准里没有iframe的padding属性，这个属性属于CSS，得通过样式来设置。

接下来分析你试过的两种方式没生效的原因，以及对应的解决办法：

1. 给父元素.main设置padding（推荐方案） #

如果你的需求是让iframe在父容器里周围留出空间，给.main加padding是正确的思路，没生效大概率是这两个原因：

• 其他CSS规则覆盖了.main的padding（比如全局div样式、带!important的规则）
• 你给.main设置了固定宽高，导致padding被挤压，总尺寸超出预期

解决代码：

.main {
  padding: 200px 200px;
  /* 可选：如果.main有固定宽高，加这个属性让padding算在宽高内部 */
  box-sizing: border-box;
}

打开浏览器开发者工具（F12），查看.main元素的样式面板，确认padding是否被正确应用，有没有被划掉的情况（划掉就是被其他规则覆盖了）。

2. 给iframe本身设置样式（适合直接调整iframe位置） #

如果你是想让iframe在页面中直接偏移，而不是依赖父容器，应该用margin而不是padding——因为iframe是替换元素，它的padding是作用于自身边框和内部文档之间的空间，但内部文档（intro.htm）是独立的，你看不到这个padding效果。改用margin就能让iframe周围产生外部空间：

.main iframe {
  margin: 200px 200px;
  /* 如果你一定要用padding，得同时调整iframe的宽高，因为padding会增加它的总尺寸 */
  /* 比如原来width=700，加padding后总宽度是700+200*2=1100，需要手动调整 */
  /* width: 300px; */
  /* padding: 200px 200px; */
}

最后记得删掉iframe标签里那个无效的padding属性，避免混淆。

内容的提问来源于stack exchange，提问作者Moonstruck