Ich habe heute etwas über prozentualen Padding (%) gelernt, das ich völlig falsch verstanden hatte! Ich dachte immer, prozentuales Padding basiere auf dem Element selbst. Wenn ein Element also 1.000 Pixel breit ist und padding-top: 50% hat, dann ist dieses Padding 500 Pixel. Es ist seltsam, dass Top-Padding auf der Breite basiert, aber so funktioniert es – aber nur *so ungefähr*. Die 50% basieren auf der Breite des *Elternelements*, nicht auf sich selbst. Das ist der Teil, der mich verwirrt hat.
Das Einzige, womit ich mich jemals mit prozentualem Padding beschäftigt habe, war der Trick mit den Aspect-Ratio-Boxen. Das Element hat eine variable Breite, aber man möchte ein bestimmtes Seitenverhältnis beibehalten, daher der Trick mit dem prozentualen Padding. In diesem Szenario ist **die Breite des Elements die Breite des Elternelements**, sodass mein falsches mentales Modell nie eine Rolle spielte.
Es braucht nicht viel, um es zu beweisen
Siehe den Pen
% Padding basiert auf dem Elternelement, nicht auf sich selbst von Chris Coyier (@chriscoyier)
auf CodePen.
Danke an Cameron Clark für die E-Mail dazu
Der Unterschied ist unerheblich, wenn Sie ein Blockelement haben, das sich ausdehnt, um die Breite seines Elternelements vollständig auszufüllen, wie in jedem Beispiel in diesem Artikel. Aber wenn Sie eine andere Breite als 100% für das Element festlegen, führt dieses Missverständnis zu verwirrenden Ergebnissen.
Sie verwiesen auf diesen Artikel von Aayush Arora, der behauptet, nur 1% der Entwickler hätten dies gewusst.
Wow, ich schätze, ich gehöre zu diesem 1%. Das erklärt vieles, als ich damit in einigen responsiven Designs herumgespielt habe.
Ich schätze, ich gehöre zu diesem 1%. Jahre des Herumspielens mit CSS haben mir endlich eine Nische verschafft.
Wow, ich war ehrlich gesagt unter der überwiegenden Mehrheit, die das nicht wusste. Danke für die Info
Ja, und das Problem tritt oft auf, wenn Sie eine maximale Breite für das Kindelement festlegen. Deshalb verwende ich immer Pseudo-Elemente für das Padding.
.child:after {content: " ";
display: block;
padding-top: 50%;
}
Dieses Verhalten ist wirklich nützlich, wenn Sie möchten, dass etwas immer das gleiche Seitenverhältnis zur Bildschirmbreite hat (z. B. für ein Header-Bild oder als iFrame-Wrapper).
Sie setzen die Höhe des Div auf 0, die Breite auf 100% und das Padding-Bottom auf das gewünschte Seitenverhältnis.
So etwas wie: padding-bottom: calc(100 / (16 / 9)) %
Hallo Leute. Da ich jetzt seit etwa 20 Jahren mit CSS arbeite, gehöre ich auch zu diesen 1%.
Das kommt vom Ausprobieren mit CSS und nicht vom Kopieren und Einfügen von Framework-Sachen.
Ich wusste das seit etwa 20 Jahren, musste aber andere schon mehrmals korrigieren :)
Der erste häufige Fehler ist, nicht zu wissen, dass vertikales prozentuales Padding auf der Breite des enthaltenden Blocks basiert, und der zweite Fehler ist, zu denken, dass der enthaltende Block das aktuelle Element ist :)
Ich muss zugeben, ich habe früher viel Zeit damit verbracht, die Spezifikationen zu lesen (https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#padding-properties), was ich jetzt vernachlässigt habe, da CSS so riesig geworden ist. ;)
Das Beispiel war etwas verwirrend, da es nur wie ein kleines rotes Rechteck neben einem großen blauen Rechteck aussieht. Fügen Sie ein wenig Transparenz hinzu, damit wir beide Elemente sehen können, das wäre viel leichter zu verstehen.