为什么CSS不支持负填充？

我已经多次看到，负填充的前景可能会帮助某些页面元素的CSS开发变得越来越好。但是，W3C CSS中没有负填充的规定。这背后的原因是什么？该属性是否有任何阻碍其使用的阻碍？感谢您的回答。

更新

例如，我看到的情况是，如果您使用的字体的垂直间距为20px，并且希望在字体底部应用虚线边框，例如出现超链接时。在这种情况下，您会发现样式太简陋，因为虚线边框会出现在指定单词下方20px。如果您使用负边距，则它将不起作用，因为边距会更改边界外的区域。在这种情况下，负填充可能会有所帮助。

我最近回答了一个不同的问题，在那儿我讨论了为什么盒子模型是这样。

盒子模型的每个部分都有特定的原因。填充旨在将背景扩展到其内容之外。如果需要缩小容器的背景，则应使父容器的尺寸正确，并给子元素一些负边距。在这种情况下，内容不会被填充，而是溢出。

根据定义，填充为正整数（包括0）。

负填充会导致边框塌陷到内容中（请参阅w3 的盒子模型页面）-这会使内容区域小于内容区域，这没有任何意义。

我想描述一个很好的例子，说明为什么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内，并且仍然允许内部div要动态！

如果您问我OP，这将是最好的用例，并且我认为应该将其实现，这样我才能做到这一点。大声笑。或者，他们应该只修复的功能vertical-align并为我们提供vertical-align适用于所有元素的版本。

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

该箱大小 CSS属性来改变用于计算宽度和元素的高度默认CSS盒模型。

http://www.w3.org/TR/css3-ui/#box-sizing
https://developer.mozilla.org/En/CSS/Box-sizing

您问为什么，而不是如何作弊：

通常由于最初实现的程序员的懒惰，因为他们已经在其他功能上投入了更多的精力，产生了更多类似浮点数的副作用，因为那时设计师对它们的要求越来越高，但是他们并没有花时间为此，我们可以使用FOUR属性将一个元素推向/推向它的邻居（现在我们只有4个推拉元素，只有2个拉推元素）。

当设计html时，杂志喜欢那时的文字在图像周围重排，现在讨厌了，因为今天我们有触摸趋势，并且喜欢方形的东西，有很大的空间，没有什么可阅读的。这就是为什么他们在浮子上施加比在居中上更大的压力，或者他们可以设计类似的东西，margin-top: fill;或者margin: average 0;只是将内容与底部对齐，或者在其周围分配额外的空间。

在这种情况下，我认为由于CSS缺少:parent伪选择器的原因，它尚未实现：防止循环求值。

在没有工程师的情况下，我可以看到现在CSS只能绘制一次元素，记住一些将来要绘制的元素的属性，但是永远不要回到已经绘制的元素上。

这就是为什么（我猜）填充是在宽度上计算的，因为这是开始绘制时可用的值。

如果填充的值为负，则将影响外部限制，当设置了边距时，该外部限制已定义。我知道还没有绘画，但是当您阅读由90年代天才发明的绘画过程如何时，我感觉我在问愚蠢的问题，只是说“谢谢”呵呵。

网页的要求之一是它们必须快速可用，不像应用程序需要花费时间并消耗计算机资源以使其在显示之前正确无误，网页需要使用很少的资源（因此它们适合每个设备）并可以轻松滚动。

如果看到诸如InDesign之类的具有复杂的重排和定位功能的应用程序，则无法快速滚动！从处理器和图形卡都需要很大的精力才能跳到下一页！

因此，绘制，计算并忘记绘制后的元素，就目前而言，这似乎是必须的。

将iframe装入容器内将与容器的尺寸不匹配。它增加了约20px的填充。当前没有简单的方法可以解决此问题。您需要javascript（http://css-tricks.com/snippets/jquery/fit-iframe-to-content/）

负边距将是一个简单的解决方案。

因为CSS的设计人员没有远见，无法想象这将带来的灵活性。有很多理由可以扩展盒子的内容区域而不影响盒子与相邻元素的关系。如果您认为不可能，请nowrap在框中放入一些长文本，在框上设置宽度，然后观察溢出的内容对布局没有任何作用。

是的，这在2019年仍与CSS3有关; 案例：flexbox布局。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>

这些年来，我已经遇到足够多的这些小问题了，而有些负面的填充会走很长的路，但是我不得不添加非语义的标记，use calc()或CSS预处理器，这些预处理器仅在单元相同时才起作用等