Question

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

更新

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

Answer 1

我最近answered a different question在那里讨论了为什么盒子模型就是这样。

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

Answer 2

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

否定填充会导致边框折叠到内容中（请参阅w3上的box-model页面） - 这会使内容区域小于内容，这没有意义。

Answer 3

我想描述一个非常好的例子，说明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 4

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

box-sizing CSS属性用于更改用于计算元素宽度和高度的默认CSS框模型。

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

Answer 5

你问为什么，而不是如何欺骗它：

通常是因为初始实现程序员的懒惰，因为他们已经在其他功能上付出更多努力，提供更多奇怪的副作用，如花车，因为当时设计师更多地要求他们，但他们还没有; t花时间允许这样做，这样我们就可以使用四个属性来推送/拉动一个元素来对抗它的邻居（现在我们只有四个要推，而只有两个要拉）。

当html被设计出来时，杂志喜欢在当时的图像周围回放文字，现在很讨厌，因为今天我们有触摸趋势，喜欢有大量空间的无聊的东西，无需阅读。这就是为什么他们对浮动物施加的压力大于对中心的压力，或者他们可以设计类似margin-top: fill;或margin: average 0;的东西来简单地将内容对齐到底部，或者分配其额外的空间。

在这种情况下，我认为它没有被实现，因为使CSS缺少:parent伪选择器的原因相同：为了防止循环评估。

如果不是工程师，我可以看到CSS现在只绘制一次元素，记住未来元素的一些属性，但不要回到已绘制的元素。

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

如果填充值为负值，则会影响外部限制，在已设置边距时已定义ALREADY。我知道，还没有画过任何东西，但是当你读到由90年代技术的天才创作的绘画过程时，我觉得我在问愚蠢的问题而只是说'＃34;感谢＆＃34;和合。

网页的一个要求是它们可以快速获得，不像应用程序可以花费时间并吃掉计算机资源以在显示之前使一切正确，网页需要使用很少的资源（因此它们很适合在每个可能的设备中）并轻而易举地滚动。

如果您看到具有复杂回流和定位的应用程序（如InDesign），则无法快速滚动！处理器和显卡都需要花费大量精力才能跳转到下一页！

因此绘制和计算前进并忘记曾经绘制过的元素，现在它似乎是必须的。

Answer 6

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

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

Answer 7

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

是的，这在2019年仍与CSS3有关；案例：flexbox布局。 Flexbox项目的边距不会折叠，因此为了将它们均匀地排列并与容器的可视边缘对齐，必须从容器的填充中减去项目的边距。如果任何结果<0，则必须在容器上使用负边距，或将该负与现有边距相加。即元素的 content 影响人们如何定义其边距，即向后。当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预处理器，仅在单位相同时起作用，等等。

为什么CSS不支持负填充？

7 个答案: