如何在不影响布局的情况下防止 CSS 边距塌陷？

如何防止边距折叠

在 CSS 中，当相邻元素的边距重叠时，它们可能会折叠，从而产生意外的间距问题。此行为旨在防止重叠并保持一致的布局，但当您需要像素完美控制时，禁用它可能具有挑战性。

标准解决方案

通常， CSS 教程建议向元素添加边框或填充以打破折叠。然而，这些解决方案会改变视觉外观，这对于依赖精确间距和背景图像的布局来说可能并不理想。

Invisible Spacer Div

防止边距塌陷在不影响布局的情况下，您可以使用具有特定属性的不可见间隔 div：

<div>
<p>此 div 充当分隔符</p>
<p><strong>示例代码</strong></p>
<p>以下代码演示了不可见间隔 div 的使用：</p>
<pre class="brush:php;toolbar:false">
    
        <div><p>中在这个例子中，两个 div 的边距将保持不变，确保所需的间距，而不会产生任何视觉副作用。</p></div>