Warum unterstützt CSS kein negatives Auffüllen?

124

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.

ikartik90
quelle
27
weil es keinen Sinn macht, eine negative Polsterung zu haben
Petah
1
Es ist dasselbe wie auf einem von Frontpage generierten HTML-Code. Es funktioniert irgendwie, wirft aber eine Menge Fehler auf, wenn es validiert wird. Negatives Auffüllen ist nicht Teil der Spezifikation, wird jedoch von Browsern unterstützt.
Linus Kleen
9
Viele Leute möchten ein Beispiel. Hier ist meine und warum ich negative Polsterung lieben würde. Wenn Sie die Rahmenbildfunktion verwenden, möchten Sie möglicherweise, dass der Bildrand den Text leicht überlappt (z. B. wenn Sie eine hochglänzende Hochglanzblase erstellen, die in diesen Tagen im Internet sehr beliebt ist;))
Himmators
81
Wenn etwas für jemanden "keinen Sinn ergibt", ist es keine Entschuldigung für ihn, jemand anderem in die Quere zu kommen.
Rolf
1
Ich versuche, Code in einem <span>Tag anzuzeigen, und die Art und Weise, wie er analysiert wird, führt zu zusätzlichen Zeilenumbrüchen am Anfang des Codeblocks. Mit negativer Polsterung könnte ich diesen zusätzlichen Platz verschwinden lassen.
Steven Lu

Antworten:

86

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.

zzzzBov
quelle
2
Danke, Alter. Das gibt mir einen befriedigenden Grund. Prost. :)
ikartik90
11
Was ist, wenn Sie den Rand näher an den Text verkleinern möchten, z. B. wenn Sie ein Rahmenbild verwenden.
Himmators
5
Manchmal ist es nicht praktisch, das CSS aller untergeordneten Elemente eines Containers zu bearbeiten. Möglicherweise verfügen Sie über generisches CSS, das für diese Elemente im gesamten Dokument gilt, und Sie möchten es beispielsweise nicht für den Inhalt eines bestimmten Containers ändern.
Rolf
15
Eh, das ist ein Grund, aber ich würde es nicht als zufriedenstellend bezeichnen. Dies ist ein Fall, in dem die Spezifikation nicht nur sagt, wie ich meine Seite definieren soll , sondern auch, wie ich meine Seite definieren soll . Wenn ich möchte, dass mein Inhalt meine Hintergrundkanten, -ränder und / oder -ränder überlappt, sollte dies mein Vorrecht sein, ungeachtet der Vorstellungen der Spezifikationsdefinitoren, warum ich dies möglicherweise tun möchte. Entschuldigung, nur ein wenig irritiert, dass ich syntaktische Cruft oder schlechtere, ein Pixel breite, einfarbige Bilder hinzufügen muss, um ein Trennzeichen mit einer bestimmten Größe zu erhalten, das kleiner als die Texthöhe und vertikal zentriert ist.
Jason
1
@zzzzBov, ich fand es aufgrund des Beispiels, das ich am Ende gegeben habe, relevant, warum ich so etwas tun möchte, was eine häufige Frage in den Kommentaren auf dieser Seite ist. Zugegeben, mein Pferd war bis zu diesem Punkt etwas hoch.
Jason
4

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.

Oded
quelle
37
Der Rand, der in den Inhalt fällt, ist genau der gewünschte Effekt. Kennen Sie einen anderen Weg, um diesen Effekt zu erzielen?
Rolf
4
Einverstanden mit Rolf. Sie, Oded, stehen offensichtlich nicht auf komplexes experimentelles Design, wie ich sehen kann. Wenn Sie negative Auffüllungen und Rahmen verwenden und keine expliziten Pixelwerte verwenden können, ist es praktisch unmöglich, ähnliche Ergebnisse zu erzielen. Soweit ich weiß, würden Sie mehrere verschachtelte Elemente benötigen, um dasselbe zu erreichen. In einigen Fällen werden die Dinge jedoch etwas komplizierter.
Yeti
4

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.

WebWanderer
quelle
1
Ja, aber zu diesem Zweck hätte ich lieber neue Attribute für HTML-Elemente, als das Verhalten anderer Attribute zu missbrauchen. Ihr Beispiel erfordert ein neues Inner-Top-Attribut. wie das oberste Attribut eines relativ positionierten Elements, jedoch relativ zu sich selbst, nicht zum übergeordneten Element. Eine andere gute Verwendung der negativen Polsterung wäre, ein Element proportional zu seiner Breite mit 100% Polsterung zu füllen, aber das Element vertikal wachsen zu lassen, wenn mehr Inhalt überläuft, was unmöglich ist, wenn sich der Inhalt in einem zusätzlichen abs-pos-Geschwister befindet. Ein negatives Auffüllen würde das aufgefüllte Element auf seine Größe zurückbringen.
Sergio
Im Jahr 2018 ist das Zentrieren so einfach wie die Verwendung von Display-Flex mit Begründungsinhalten und Ausrichten von Elementen ... 3 Codezeilen für ein perfekt zentriertes Div.
Kaiser
1

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.

Sergio
quelle
0

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.

John Ktejik
quelle
0

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.

Walf
quelle