如何让 CSS 边距与 CSS 填充重叠以避免多余的间距？答案

【问题标题】：How can I get a CSS margin to overlap with CSS padding to avoid redundant spacing?如何让 CSS 边距与 CSS 填充重叠以避免多余的间距？
【发布时间】：2015-08-06 00:56:16
【问题描述】：

基本上我有一个包装<div> 的意思是在某物周围添加一个边框。它的内边距为 19 像素。在包装<div> 里面我想插入几乎任何类型的内容。目前，它内部还有另一个<div>。问题是那个内部<div>的下边距是20px，所以内部<div>的末端和边框之间有39px的空间，看起来很别扭。

就问题而言，相关代码只是

<div style="padding: 19px;">
    <div style="margin-bottom: 20px;"></div>
</div>

我只想知道如何使内部 div 的边距与外部 div 的填充重叠（或者通过作用于外部 div 的类的 CSS 将其设置为零）。

有没有办法让包装器中最后一项的下边距与填充重叠？或者，我可以简单地将包装器的最后一个孩子的边距设置为 0px 吗？

【问题讨论】：

你需要伪选择器。 div:last-child { your CSS } 给父 div 一个 id，然后使用 #parentDivsID div:last-child { margin-bottom:0px }
Jay，这基本上是我现在刚刚设置的（除了没有 div 限定符，因为我希望它适用于任何标签，而不仅仅是 div）。请参阅我刚刚发布的“答案”。我想知道是否有办法使边距和填充实际上重叠。我知道当两个边距会产生多余的间距（即重叠边距）时，CSS 已经这样做了。

标签： html css

【解决方案1】：

我实际上找到了一种似乎适用于替代选项的方法（将包装器的最后一个子项的下边距设置为 0px）。这是相关的 CSS，其中“callout-box”是包装器的类。

.callout-box > :last-child {
    margin-bottom: 0px;
}

我仍然很好奇是否有一种方法可以在不删除边距的情况下实际导致边距和填充重叠。在这种情况下，存在 1px 的差异，因为我刚刚给出的解决方案将间距设置为 19px，而重叠边距和填充将给出 20px。

【讨论】：

【解决方案2】：

我只想知道如何使内部 div 的边距与外部 div 的填充重叠（或者通过作用于外部 div 的类的 CSS 将其设置为零）。

答案：

很简单，只需添加否定top margin。看下面的代码。

<div style="padding: 19px;">
    <div style="margin-bottom: 20px; margin-top:-19px;">Inner Div</div> 
</div>

【讨论】：

这根本不是我想要的。我想将 CSS 添加到适用于内部任何 HTML 内容的外部 div（无论它是什么），以删除在底部添加的冗余间距。如果我要编辑内部标签的样式，那就是删除下边距，而不是弄乱上边距。我觉得你根本没有读过第一段。
答案是基于您以这种方式提到的 cmets “就问题而言，相关代码只是 <div style="padding: 19px;"><div style="margin-bottom: 20px;"></div></div> 我只想知道如何使内部 div 与外部 div 的填充重叠（或者通过作用于外部 div 的类的 CSS 将其设置为零）。”而您的主要问题令人困惑。