Warum unterstützt CSS kein negatives Auffüllen?

Ich habe schon oft gesehen, dass die Aussicht auf ein negatives Auffüllen dazu beitragen kann, dass die Entwicklung von CSS für bestimmte Seitenelemente besser und einfacher wird. Es ist jedoch keine negative Auffüllung im W3C-CSS vorgesehen. Was ist der Grund dafür? Gibt es ein Hindernis für das Eigentum, das seine Verwendung als solches verhindert? Danke für deine Antworten.

UPDATE

Wie ich zum Beispiel sehe, wenn Sie eine Schriftart verwenden, die beispielsweise einen vertikalen Abstand von 20 Pixel hat, und einen gestrichelten Rand am unteren Rand der Schriftart anbringen möchten, beispielsweise wenn ein Hyperlink angezeigt wird. In solchen Fällen ist der Stil viel zu schäbig, da der gestrichelte Rand 20 Pixel unter dem angegebenen Wort angezeigt wird. Wenn Sie einen negativen Rand verwenden, funktioniert dies nicht, da der Rand den Bereich außerhalb der Grenzen ändert. Negative Polsterung kann in solchen Situationen hilfreich sein.

Ich habe kürzlich eine andere Frage beantwortet, in der ich besprochen habe, warum das Box-Modell so ist, wie es ist.

Für jeden Teil des Boxmodells gibt es bestimmte Gründe. Das Auffüllen soll den Hintergrund über seinen Inhalt hinaus erweitern. Wenn Sie den Hintergrund des Containers verkleinern müssen , sollten Sie den übergeordneten Container auf die richtige Größe einstellen und dem untergeordneten Element einige negative Ränder geben. In diesem Fall wird der Inhalt nicht aufgefüllt , sondern läuft über.

Das Auffüllen ist per Definition eine positive ganze Zahl (einschließlich 0).

Ein negatives Auffüllen würde dazu führen, dass der Rand in den Inhalt fällt (siehe die Box-Modell- Seite auf w3) - dies würde den Inhaltsbereich kleiner als den Inhalt machen, was keinen Sinn ergibt.

Ich möchte ein sehr gutes Beispiel dafür beschreiben, warum negative paddingdies nützlich und großartig wäre.

Wie wir alle CSS-Entwickler wissen, ist das vertikale Ausrichten eines Divs mit dynamischer Größe innerhalb eines anderen mühsam und wird größtenteils nur mit CSS als unmöglich angesehen. Die Einbeziehung von negative paddingkönnte dies ändern.

Bitte überprüfen Sie den folgenden HTML-Code:

<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>

Mit dem folgenden CSS könnten wir den Inhalt des Inneren divinnerhalb des Äußeren vertikal zentrieren div:

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

Gestatten Sie mir zu erklären ...

Wenn Sie die Oberseite des inneren Divs absolut auf 50% positionieren, wird die Oberkante des inneren Divs in der Mitte des äußeren Divs platziert. Ziemlich einfach. Dies liegt daran, dass die prozentuale Positionierung relativ zu den Innenabmessungen des übergeordneten Elements ist .

Prozentuales Polsterung , auf der anderen Seite, wird auf der Basis der Innenabmessungen des Zielelements . Durch Anwenden der Eigenschaft von haben padding-top: -50%;wir den Inhalt des inneren Divs um einen Abstand von 50% der Höhe des Inhalts des inneren Divs nach oben verschoben, wodurch der Inhalt des inneren Divs innerhalb des äußeren Divs zentriert wird und dennoch die Höhendimension des innerer div, um dynamisch zu sein!

Wenn Sie mich nach OP fragen, ist dies der beste Anwendungsfall, und ich denke, er sollte implementiert werden, damit ich diesen Hack ausführen kann. lol. Oder sie sollten einfach die Funktionalität von korrigieren vertical-alignund uns eine Version geben vertical-align, die für alle Elemente funktioniert.

Dies könnte übrigens helfen:

Die Box-Sizing CSS - Eigenschaft wird verwendet , um das Standard - CSS - Box - Modell zu berechnen Breiten und Höhen der verwendeten Elemente zu verändern.

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

Du hast gefragt, warum, nicht wie man es betrügt:

Normalerweise wegen der Faulheit der Programmierer bei der anfänglichen Implementierung, weil sie bereits viel mehr Aufwand in andere Funktionen gesteckt haben und seltsamere Nebenwirkungen wie Floats liefern, weil sie damals von Designern mehr nachgefragt wurden und sich dennoch nicht die Zeit genommen haben Um dies zu ermöglichen, können wir die VIER Eigenschaften verwenden, um ein Element gegen seine Nachbarn zu drücken / ziehen (jetzt haben wir nur noch vier zum Drücken und nur zwei zum Ziehen).

Als HTML entworfen wurde, liebten Magazine damals Text, der um Bilder herumfloss, jetzt gehasst, weil wir heute Touch-Trends haben und quadratische Dinge mit viel Platz und nichts zu lesen lieben. Das ist der Grund, warum sie mehr Druck auf Schwimmer ausüben als auf die Zentrierung, oder sie hätten so etwas wie margin-top: fill;oder margin: average 0;entwerfen können, um den Inhalt einfach nach unten auszurichten oder seinen zusätzlichen Platz zu verteilen.

In diesem Fall denke ich, dass es aus dem gleichen Grund nicht implementiert wurde, der dazu führt, dass CSS keinen :parentPseudo-Selektor hat: Um Schleifenauswertungen zu verhindern.

Ohne Ingenieur zu sein, kann ich sehen, dass CSS derzeit zum einmaligen Malen von Elementen erstellt wird. Denken Sie an einige Eigenschaften für zukünftige zu malende Elemente, aber kehren Sie NIEMALS zu bereits gemalten Elementen zurück.

Aus diesem Grund wird (ich denke) die Polsterung anhand der Breite berechnet, da dies der Wert ist, der zum Zeitpunkt des Beginns des Malens verfügbar war.

Wenn Sie einen negativen Wert für das Auffüllen hätten, würde dies die äußeren Grenzen beeinflussen, die BEREITS definiert wurden, wenn der Rand bereits festgelegt wurde. Ich weiß, es wurde noch nichts gemalt, aber wenn Sie lesen, wie der Malprozess abläuft, der von Genies mit 90er-Technologie erstellt wurde, habe ich das Gefühl, ich stelle dumme Fragen und sage einfach "Danke", hehe.

Eine der Anforderungen von Webseiten besteht darin, dass sie schnell verfügbar sind. Im Gegensatz zu einer App, die ihre Zeit in Anspruch nehmen und die Computerressourcen verbrauchen kann, um alles richtig zu machen, bevor sie angezeigt wird, müssen Webseiten nur geringe Ressourcen verbrauchen (damit sie in jedes Gerät passen möglich) und im Handumdrehen gescrollt werden.

Wenn Sie Anwendungen mit komplexem Reflow und Positionierung wie InDesign sehen, können Sie nicht so schnell scrollen! Sowohl Prozessoren als auch Grafikkarten sind sehr bemüht, um zu den nächsten Seiten zu gelangen!

Malen und rechnen Sie also vorwärts und vergessen Sie ein einmal gezeichnetes Element, denn jetzt scheint es ein MUSS zu sein.

Das Anbringen eines Iframes in Containern entspricht nicht der Größe des Containers. Es fügt ungefähr 20px Polsterung hinzu. Derzeit gibt es keine einfache Möglichkeit, dies zu beheben. Sie benötigen Javascript ( http://css-tricks.com/snippets/jquery/fit-iframe-to-content/ )

Negative Margen wären eine einfache Lösung.

Weil die Designer von CSS nicht die Voraussicht hatten, sich die Flexibilität vorzustellen, die dies bringen würde. Es gibt viele Gründe, den Inhaltsbereich einer Box zu erweitern, ohne die Beziehung zu benachbarten Elementen zu beeinträchtigen. Wenn Sie der Meinung sind, dass dies nicht möglich ist, fügen Sie einen langen nowrapText in ein Feld ein, legen Sie eine Breite für das Feld fest und beobachten Sie, wie der übergelaufene Inhalt nichts mit dem Layout zu tun hat.

Ja, dies ist für CSS3 im Jahr 2019 immer noch relevant. Ein typisches Beispiel: Flexbox-Layouts. Die Ränder der Flexbox-Elemente fallen nicht zusammen. Um sie gleichmäßig zu platzieren und am visuellen Rand des Containers auszurichten, müssen die Ränder der Elemente von der Polsterung des Containers abgezogen werden. Wenn ein Ergebnis <0 ist, müssen Sie einen negativen Rand für den Container verwenden oder diesen negativen Rand mit dem vorhandenen Rand addieren. Das heißt, der Inhalt des Elements beeinflusst, wie man die Ränder dafür definiert, was rückwärts ist. Das Summieren funktioniert nicht sauber, wenn der Inhalt von Flex-Elementen Ränder in verschiedenen Einheiten definiert hat oder von einer anderen Schriftgröße usw. beeinflusst wird.

Das folgende Beispiel sollte im Idealfall ausgerichtete und gleichmäßig verteilte graue Kästchen haben, aber leider nicht.

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>

Ich bin im Laufe der Jahre auf genug dieser kleinen Probleme gestoßen, bei denen ein wenig negatives Auffüllen einen langen Weg zurückgelegt hätte, aber stattdessen bin ich gezwungen, nicht-semantische Markup-, Verwendungs- calc()oder CSS-Präprozessoren hinzuzufügen , die nur funktionieren, wenn die Einheiten gleich sind , etc.