为什么 CSS 不支持负填充？

小开

根据定义填充是一个正整数(包括0)。

负填充会导致边框折叠成内容(参见 w3上的盒装模型页面)-这会使内容区域比内容区域小，这是没有意义的。

小开

最佳答案

我最近在回答了另一个问题我讨论了 为什么的盒子模型是它的方式。

盒子模型的每个部分都有其特定的原因。填充意味着将背景扩展到其内容之外。如果需要 心理医生作为容器的背景，应该使父容器的大小正确，并给子元素一些负边距。在这种情况下，内容不是衬垫，而是溢出。

小开

顺便说一句，这可能会有所帮助:

盒子大小 CSS 属性用于更改用于计算元素宽度和高度的默认 CSS 框模型。

Http://www.w3.org/tr/css3-ui/#box-sizing
Https://developer.mozilla.org/en/css/box-sizing

小开

在容器内安装一个 Iframe 将与容器的大小不匹配。它增加了大约20像素的填充。目前还没有简单的方法来解决这个问题。你需要 javascript (http://css-tricks.com/snippets/jquery/fit-iframe-to-content/)

负利润率将是一个简单的解决方案。

小开

我想描述一个非常好的例子，说明为什么 negative padding是有用的和令人敬畏的。

正如我们所有的 CSS 开发人员都知道的那样，在另一个动态大小的 div 中垂直对齐是一件麻烦事，而且在大多数情况下，仅仅使用 CSS 被认为是不可能的。negative padding的加入可能会改变这一点。

请浏览以下 HTML:

<div style="height:600px; width:100%;">
<div class="vertical-align" style="width:100%;height:auto;" >
This DIV's height will change based the width of the screen.
</div>
</div>

使用下面的 CSS，我们可以将内部 div的内容垂直居中在外部 div内:

.vertical-align {
position: absolute;
top:50%;
padding-top:-50%;
overflow: visible;
}

请允许我解释..。

绝对将内部 div 的顶部定位在50% ，将内部 div 的顶部边缘放置在外部 div 的中心。很简单。这是因为 基于百分比的定位是相对于父元素的内部尺寸的。

另一方面，基于百分比的填充 ，是基于目标元素的内部维度。因此，通过应用 padding-top: -50%;的特性，我们将内部 div 的内容向上移动了内部 div 内容高度的50% ，因此将内部 div 的内容集中在外部 div 内，并且 < strong > 仍然允许内部 div 的高度维度是动态的！

如果你问我 OP，这将是最好的用例，我认为它应该实现，这样我就可以做这个黑客。哈哈。或者，他们只需修复 vertical-align的功能，给我们一个适用于所有元素的 vertical-align版本。

小开

你问的是为什么，而不是如何欺骗:

通常是因为最初实现的程序员的懒惰，因为他们已经在其他特性上投入了更多的精力，提供了更多奇怪的副作用，比如浮点数，因为他们当时被设计师要求更多，但是他们没有花时间允许这样做，所以我们可以使用 FOUR 属性来推/拉一个元素来对抗它的邻居(现在我们只有4个要推，只有2个要拉)。

当 HTML 被设计出来的时候，杂志喜欢文字在图片上反复出现，现在我们讨厌它，因为今天我们有触摸趋势，喜欢有很多空间但没有东西可读的方形的东西。这就是为什么他们把更多的压力对浮动比对中心，或者他们可以设计一些像 margin-top: fill;或 margin: average 0;只是调整内容的底部，或分布其周围的额外空间。

在这种情况下，我认为它没有实现，因为同样的原因，使 CSS 缺乏一个 :parent伪选择器: 以防止循环计算。

虽然我不是工程师，但是我可以看到 CSS 现在只能绘制一次元素，记住一些将来要绘制的元素的属性，但是绝对不能回到已经绘制的元素。

这就是为什么(我猜想)填充是根据宽度计算的，因为这是开始绘制时可用的值。

如果填充值为负值，则会影响外部限制，在已经设置边距时已经定义了外部限制。我知道，现在还没有任何作品被绘制出来，但是当你读到由90年代的天才们创造的绘画过程时，我觉得我在问一些愚蠢的问题，然后只是说“谢谢”呵呵。

网页的一个要求就是它们可以很快的获得，不像一个应用程序可以慢慢来，在显示之前吃掉计算机资源来获得所有正确的东西，网页需要使用很少的资源(这样它们可以适应每一个可能的设备) ，并且可以轻松地滚动。

如果您看到了具有复杂的回流和定位的应用程序，比如 InDesign，那么您不可能滚动得那么快！从处理器和图形卡跳到下一页需要付出很大的努力！

因此，绘制和计算前进，忘记了一个元素一旦绘制，因为现在它似乎是一个必须的。

小开

更新: Flexbox 现在拥有 gap属性来克服下面列出的特定问题，但是它并没有改变这样一个事实，即负填充可以解决很多样式问题，这些问题只能通过一些技巧来解决，比如一个非语义包装元素在父元素和它的语义子元素之间带有负边距。

因为 CSS 的设计者没有预见到这将带来的灵活性。有很多理由可以在不影响框与邻近元素关系的情况下扩展框的内容区域。如果您认为这在技术上是不可能的，那么将一些长的 nowrap文本放入一个框中，在框上设置一个宽度，然后观察溢出的内容如何对布局没有任何影响。这似乎是一种基于物理约束的严格解释，而这些约束根本不适用于数字对象。没有理由不能继续表示“外部”边缘到相邻元素的距离，填充是元素内容与外部边缘的相对位置。

是的，这仍然与2019年的 CSS3有关; 例如: 柔性箱布局。Flexbox 项目的边距不会折叠，因此为了使它们的间距与容器的视觉边缘保持一致，必须从容器的填充中减去项目的边距。如果有任何结果是 < 0，则必须在容器上使用负边距，或者将该负边距与现有边距相加。也就是说，元素的内容影响定义它的边距的方式，它是向后的。如果 flex 元素的内容的边距定义在不同的单位，或者受到不同字体大小的影响，那么求和就不能很好地工作。

下面的例子应该，理想的对齐和均匀间隔的灰色方块，但遗憾的是，他们没有。

body {
font-family: sans-serif;
margin: 2rem;
}
body > * {
margin: 2rem 0 0;
}
body > :first-child {
margin-top: 0;
}
h1,
li,
p {
padding: 10px;
background: lightgray;
}
ul {
list-style: none;
display: flex;
flex-wrap: wrap;
padding: 0;/* just to reset */
padding: -5px;/* would allow correct alignment */
}
li {
flex: 1 1 auto;
margin: 5px;
}

<h1>Cras facilisis orci ligula</h1>


<ul>
<li>a lacinia purus porttitor eget</li>
<li>donec ut nunc lorem</li>
<li>duis in est dictum</li>
<li>tempor metus non</li>
<li>dapibus sapien</li>
<li>phasellus bibendum tincidunt</li>
<li>quam vitae accumsan</li>
<li>ut interdum eget nisl in eleifend</li>
<li>maecenas sodales interdum quam sed accumsan</li>
</ul>


<p>Fusce convallis, arcu vel elementum pulvinar, diam arcu tempus dolor, nec venenatis sapien diam non dui. Nulla mollis velit dapibus magna pellentesque, at tempor sapien blandit. Sed consectetur nec orci ac lobortis.</p>


<p>Integer nibh purus, convallis eget tincidunt id, eleifend id lectus. Vivamus tristique orci finibus, feugiat eros id, semper augue.</p>

这些年来，我已经遇到了足够多的这些小问题，其中一点点负面填充本来可以走很长的路，但是我不得不添加非语义标记，使用 calc()或 CSS 预处理器，只有当单元相同时才能工作，等等。