Html 为什么 CSS 不支持负填充？

Why does CSS not support negative padding?

提问by ikartik90

I have seen this many a times that the prospect of a negative padding might help the development of CSS of certain page elements become better and easier. Yet, there is no provision for a negative padding in the W3C CSS. What is the reason behind this? Is there any obstruction to the property that prevents it's use as such? Thanks for your answers.

我已经多次看到这种情况，负填充的前景可能有助于某些页面元素的 CSS 开发变得更好和更容易。然而，W3C CSS 中没有负填充的规定。这背后的原因是什么？该财产是否有任何障碍阻止其使用？感谢您的回答。

UPDATE

As I see, for example, in case you are using a font that has something, say, a 20px of vertical spacing, and you wish to apply a dashed border to the bottom of the font, say when a hyperlink appears. In such cases you'll find the style to be way too shabby, as the dashed border will appear 20px below the specified word. if you use negative margin, it's not going to work, as margin alters the area outside borders. Negative padding might help in such situations.

更新

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

采纳答案by zzzzBov

I recently answered a different questionwhere I discussed whythe box model is the way it is.

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

There are specific reasons for each part of the box model. Padding is meant to extend the background beyond its contents. If you need to shrinkthe background of the container, you should make the parent container the correct size and give the child element some negative margins. In this case the content is not being padded, it's overflowing.

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

回答by Oded

Padding by definition is a positive integer (including 0).

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

Negative padding would cause the border to collapse into the content (see the box-modelpage on w3) - this would make the content area smaller than the content, which doesn't make sense.

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

回答by WebWanderer

I would like to describe a very good example of why negative paddingwould be useful and awesome.

我想描述一个很好的例子，说明为什么negative padding有用和很棒。

As all of us CSS developers know, vertically aligning a dynamically sizing div within another is a hassle, and for the most part, viewed as being impossible only using CSS. The incorporation of negative paddingcould change this.

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

Please review the following HTML:

请查看以下 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>

With the following CSS, we would be able to vertically center the content of the inner divwithin the outer div:

使用以下 CSS，我们将能够将内层的内容垂直居中div于外层div：

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

Allow me to explain...

请允许我解释...

Absolutely positioning the inner div's top at 50% places the top edge of the inner div at the center of the outer div. Pretty simple. This is because percentage based positioning is relative to the inner dimensions of the parent element.

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

Percentage based padding, on the other hand, is based on the inner dimensions of the targeted element. So, by applying the property of padding-top: -50%;we have shifted the content of the inner div upward by a distance of 50% of the height of the inner div's content, therefore centering the inner div's content within the outer div and still allowing the height dimension of the inner div to be dynamic!

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

If you ask me OP, this would be the best use-case, and I think it should be implemented just so I can do this hack. lol. Or, they should just fix the functionality of vertical-alignand give us a version of vertical-alignthat works on all elements.

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

回答by sergio

You asked WHY, not how to cheat it:

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

Usually because of laziness of programmers of the initial implementation, because they HAVE already put way more effort in other features, delivering more odd side-effects like floats, because they were more requested by designers back then and yet they haven't taken the time to allow this so we can use the FOUR properties to push/pull an element against its neighbors (now we only have four to push, and only 2 to pull).

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

When html was designed, magazines loved text reflown around images back then, now hated because today we have touch trends, and love squary things with lots of space and nothing to read. That's why they put more pressure on floats than on centering, or they could have designed something like margin-top: fill;or margin: average 0;to simply align the content to the bottom, or distribute its extra space around.

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

In this case I think it hasn't been implemented because of the same reason that makes CSS to lack of a :parentpseudo-selector: To prevent looping evaluations.

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

Without being an engineer, I can see that CSS right now is made to paint elements once, remember some properties for future elements to be painted, but NEVER going back to already-painted elements.

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

That's why (I guess) padding is calculated on the width, because that's the value that was available at the time of starting to paint it.

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

If you had a negative value for padding, it would affect the outer limits, which has ALREADY been defined when the margin has already been set. I know, nothing has been painted yet, but when you read how the painting process goes, created by geniuses with 90's technology, I feel like I am asking dumb questions and just say "thanks" hehe.

如果填充为负值，则会影响外部限制，该限制在已设置边距时已定义。我知道，还没有画什么，但是当你看到90后技术天才创作的绘画过程是如何进行的，我觉得我在问愚蠢的问题，只是说“谢谢”嘿嘿。

One of the requirements of web pages is that they are quickly available, unlike an app that can take its time and eat the computer resources to get everything correct before displaying it, web pages need to use little resources (so they are fit in every device possible) and be scrolled in a breeze.

网页的要求之一是它们可以快速访问，不像应用程序需要花时间和消耗计算机资源才能在显示之前使所有内容正确无误，网页需要使用很少的资源（因此它们适合每个设备可能）并轻而易举地滚动。

If you see applications with complex reflowing and positioning, like InDesign, you can't scroll that fast! It takes a big effort both from processors and graphic card to jump to next pages!

如果您看到具有复杂回流和定位的应用程序，例如 InDesign，您将无法快速滚动！处理器和显卡都需要付出很大的努力才能跳到下一页！

So painting and calculating forward and forgetting about an element once drawn, for now it seems to be a MUST.

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

回答by Rolf

This could help, by the way:

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

The box-sizingCSS property is used to alter the default CSS box model used to calculate widths and heights of elements.

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

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

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

回答by john ktejik

Fitting an Iframe inside containers will not match the size of the container. It adds about 20px of padding. Currently there is no easy way to fix this. You need javascript (http://css-tricks.com/snippets/jquery/fit-iframe-to-content/)

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

Negative margins would be an easy solution.

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

回答by Walf

Because the designers of CSS didn't have the foresight to imagine the flexibility this would bring. There are plenty of reasons to expand the content area of a box without affecting its relationship to neighbouring elements. If you think it's not possible, put some long nowrap'd text in a box, set a width on the box, and watch how the overflowed content does nothing to the layout.

因为 CSS 的设计者没有预见这会带来的灵活性。有很多理由可以在不影响框与相邻元素的关系的情况下扩展框的内容区域。如果您认为这是不可能的，请将一些长nowrap文本放入一个框中，在框上设置一个宽度，然后观察溢出的内容如何对布局没有任何影响。

Yes, this is still relevant with CSS3 in 2019; case in point: flexbox layouts. Flexbox items' margins do not collapse, so in order to space them evenly andalign them with the visual edge of the container, one must subtract the items' margins from their container's padding. If any result is < 0, you must use a negative margin on the container, or sum that negative with the existing margin. I.e. the contentof the element effects how one defines the margins for it, which is backwards. Summing doesn't work cleanly when flex elements' content have margins defined in different units or are affected by a different font-size, etc.

是的，这仍然与 2019 年的 CSS3 相关；举个例子：flexbox 布局。Flexbox 项目的边距不会折叠，因此为了均匀地间隔它们并将它们与容器的视觉边缘对齐，必须从容器的填充中减去项目的边距。如果任何结果 < 0，您必须在容器上使用负边距，或将负边距与现有边距相加。即元素的内容影响人们如何定义它的边距，这是向后的。当 flex 元素的内容具有以不同单位定义的边距或受不同字体大小等影响时，求和无法正常工作。

The example below should, ideally have aligned and evenly spaced grey boxes but, sadly they aren't.

理想情况下，下面的示例应该具有对齐且均匀间隔的灰色框，但遗憾的是它们不是。

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>

I have encountered enough of these little issues over the years where a little negative padding would have gone a long way, but instead I'm forced to add non-semantic markup, use calc(), or CSS preprocessors which only work when the units are the same, etc.

多年来，我遇到了足够多的这些小问题，在这些小问题中，一点点负填充会大有帮助，但我不得不添加非语义标记、usecalc()或 CSS 预处理器，这些预处理器仅在单位相同时才起作用， 等等。