多个div嵌套时，内部div的上间距（margin-top）会带动外围div一起，怎样解决这种问题呢？

Posted 2023-04-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了多个div嵌套时，内部div的上间距（margin-top）会带动外围div一起，怎样解决这种问题呢？相关的知识，希望对你有一定的参考价值。

参考技术A 不要用margin 用padding 给外面的盒子加padding-top 参考技术B 给父元素加 overflow:hidden; 有问题请追问

jQuery，切换 div，CSS 间距问题

【中文标题】jQuery，切换 div，CSS 间距问题【英文标题】：jQuery, toggling div, CSS spacing issue 【发布时间】：2011-01-18 00:27:32 【问题描述】：

我有这个标记：

<div class="myToggledDiv">
    <div>content</div>
</div>

<div style="margin-top: 10px;">
    content
</div>

通过 jQuery，我正在使用 .slideToggle 来显示/隐藏顶部 div。

我希望两个 div 之间始终保持 10px 的空间，无论是折叠还是展开。

然而，当顶部 div 向下滑动时，10px 边距仍然存在，但一旦顶部 div 完成向下滑动，10px 边距就会消失。这似乎是一个保证金崩溃问题。

我想出的解决方案是这样的：

<div class="myToggledDiv">
    <div>content</div>
</div>

<div style="font-size: 1px">&nbsp;</div>

<div style="margin-top: 10px;">
    content
</div>

是关键，因为 div 中需要有内容来“分离”两者并保留 10px 的边距。

我也尝试了 .clearfix:after 方法，但这在这种情况下不起作用，所以这可能是一个以 jQuery 为中心的问题。有没有人遇到过这个问题并找到了比额外的 div 更优雅的解决方案？

【问题讨论】：

【参考方案1】：

信不信由你，您只需在父容器顶部添加一个1px 填充。问题是，在slideToggle 的末尾，第一个div 设置为display:none，这会导致第二个div 对父级进行轻拍。现在，它只是一个 CSS 错误。如果父项上没有设置padding，则子项的边距将移到父项的外部，并将两个项向下推。通过对父元素应用1px 边距，可以强制margin 留在元素内：

<body style="padding-top: 1px">
  <div class="myToggledDiv">
      <div>content</div>
  </div>

  <div style="margin-top: 10px;">
      content
  </div>
</body>

显然，您希望删除所有这些内联样式并根据需要使用单独的样式表和 id/类。

如果您需要抵消额外的填充（取决于您的布局），您也许可以使用这个：