嵌套Div内边距问题咨询：内层Div加padding未与外层产生间距

嘿，我来帮你搞定这个布局问题～你遇到的核心是CSS盒模型的默认行为，还有可能混淆了padding和margin的作用，咱们一步步拆解：

1. 为什么内层Div加padding后尺寸变大？ #

默认情况下，CSS采用**content-box盒模型**：你设置的width和height只对应元素的内容区域，padding会额外加到尺寸外面。所以给内层div加padding后，它的实际宽高就变成了「设置的尺寸 + padding值」，自然就“撑大”了。

解决这个很简单，给内层div加上：

box-sizing: border-box;

这个属性会让width和height包含padding和border，元素的总尺寸就会严格遵守你设置的200px×80px，不会被padding撑大。

2. 怎么让内层Div和外层Div产生间距？ #

你想要的“距离外层顶部和左侧各50px”，应该用**margin**而不是padding哦！

• padding是给元素内部（比如里面的iframe）留间距；
• margin才是控制元素和外部容器（外层div）的距离。

给内层div加上这段样式就能实现需求：

margin: 50px 0 0 50px;

3. 关于iframe的影响 #

iframe默认会自带一些样式（比如默认边框），但一般不会直接导致你说的间距问题。如果它影响了内层div的布局，可以给iframe也加上box-sizing: border-box，再设置border: none去掉默认边框，让它完美适配内层div的空间：

.inner iframe {
  width: 100%;
  height: 100%;
  border: none;
  box-sizing: border-box;
}

完整示例代码 #

最后给你一套可以直接用的完整代码，方便你参考：

<div class="outer-div">
  <div class="inner-div">
    <iframe src="你的页面链接"></iframe>
  </div>
</div>

.outer-div {
  background-color: blue;
  /* 记得给外层div设置足够的尺寸，不然可能看不到蓝色背景哦 */
  width: 300px;
  height: 180px;
}

.inner-div {
  width: 200px;
  height: 80px;
  box-sizing: border-box;
  margin: 50px 0 0 50px;
  /* 这里可以加内层自己的内边距，不会撑大尺寸 */
  padding: 10px;
  background-color: #fff; /* 加白色背景方便区分 */
}

.inner-div iframe {
  width: 100%;
  height: 100%;
  border: none;
  box-sizing: border-box;
}

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