为什么CSS不支持负填充？

Question

我已经多次看到,负填充的前景可能有助于某些页面元素的CSS开发变得更好,更容易.然而,W3C CSS中没有提供负填充.这背后的原因是什么？该物业是否存在阻碍其使用的障碍？谢谢你的回答.

更新

正如我所看到的,例如,如果您使用的是具有某种东西的字体,例如,20px的垂直间距,并且您希望在字体底部应用虚线边框,请说出出超链接时.在这种情况下,您会发现样式过于简陋,因为虚线边框将显示在指定单词下方20px处.如果你使用负余量,它就不会起作用,因为保证金会改变边界以外的区域.在这种情况下,负填充可能会有所帮助.

Answer 1

我最近回答了一个不同的问题,在那里我讨论了盒子模型的原因.

盒子模型的每个部分都有特定的原因.填充旨在将背景扩展到其内容之外.如果需要缩小容器的背景,则应使父容器的大小正确,并为子元素赋予一些负边距.在这种情况下,内容没有填充,它溢出.

Answer 2

我想描述一个很好的例子，说明为什么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，这将是最好的用例，我认为它应该被实现，这样我才能做这个 hack。哈哈。或者，他们应该只修复 的功能vertical-align并给我们一个vertical-align适用于所有元素的版本。

Answer 3

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

负填充会导致边框折叠到内容中(请参阅w3上的框模型页面) - 这会使内容区域小于内容,这没有意义.