Warum stellt sich height:0 eigentlich so an? Bzw. ich?
Nico R.
0 Robert B.
0 Nico R.
-1
0 
Rolf B
0 Nico R.
Warum stellt sich height:0 eigentlich so an? Bzw. ich?
Nico R.
Gunnar BittersmannHallo zusammen,
wieso kriege ich dieses div nicht per einfachem height: 0 auf eine Höhe von Null?
<!DOCTYPE html>
<html lang="de">
<head>
<style>
div {
display: block;
box-sizing: border-box;
max-width: 50vw;
height: 0;
margin: 10vh auto;
padding: 0.7em;
border: 1px solid black;
line-height: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div>DIV</div>
</body>
<html>
Ich muss explizit auch noch padding und border auf 0 setzen. Warum ist das so? Was ist der Sinn dahinter? Und wenn ich davon ausgehe, dass es am Boxmodell liegt, warum hat dann box-sizing: border-box hier keinen Effekt?
Eigentlich ist das doch Unterrichtsstoff aus der 1. Stunde HTML. Ich frage mich, wie ich es bisher überhaupt geschafft habe, irgendwelche Seiten zu bauen. Ich war da wohl gerade Kreide holen...
Schöne Grüße
Nico
-
Moin Nico,
Hallo zusammen,
wieso kriege ich dieses div nicht per einfachem
height: 0auf eine Höhe von Null?deswegen:
div { display: block; box-sizing: border-box; max-width: 50vw; height: 0; margin: 10vh auto; padding: 0.7em; border: 1px solid black; line-height: 0; overflow: hidden; }bzw. deswegen:
[…] wenn ich davon ausgehe, dass es am Boxmodell liegt, […]
[…] warum hat dann
box-sizing: border-boxhier keinen Effekt?Im von Dir verlinkten Wiki-Artikel zum Boxmodell steht hierzu:
Durch box-sizing: border-box werden Innenabstand und Randlinie nun ohne weitere Berechnung von uns durch den Browser bei der Breitenberechnung berücksichtigt.
Was möchtest Du denn eigentlich erreichen?
Viele Grüße
Robert-
Hallo Robert,
Im von Dir verlinkten Wiki-Artikel zum Boxmodell steht hierzu:
Durch box-sizing: border-box werden Innenabstand und Randlinie nun ohne weitere Berechnung von uns durch den Browser bei der Breitenberechnung berücksichtigt.
Eben darum würde ich davon ausgehen, dass der Innenabstand bei der Berechung der Höhe keine Rolle spielt. Umgekehrt ist es ja genauso. Mit diesen Angaben…
div { box-sizing: border-box; width: 500px; height: 500px; padding: 100px; }ist das div 500px breit und hoch, egal auf welchen Wert der Innenabstand gesetzt wird. Selbiges würde ich erwarten, wenn ich width und height auf 0 setze.
Was möchtest Du denn eigentlich erreichen?
Das Element soll nicht sichtbar sein.
Schöne Grüße
Nico
-
Hallo Nico,
es stimmt schon: das Box-Modell ... denn wenn Du height:0 machst, kommt ja noch das margin: 10vh auto; dazu, denn margin heißt ja margin-left, margin-top, margin-bottom und margin-right ... und margin-top und margin-bottom kommen halt noch zum height dazu - splitte das margin doch mal auf und schau, was passiert ....
-
Hallo Hans,
nein, das margin hat keinen Einfluss. Das hatte ich auch nicht erwartet.
Ich bin etwas erstaunt über die Erklärung auf SELFHTML. Dass sich die Gesamtbreite aus margin-left + border-left + padding-left + width + padding-right + border-right + margin-right berechnet, konnte ich im Test nicht reproduzieren:
<!DOCTYPE html> <html lang="de"> <head> <style> select, div { display: block; /*box-sizing: border-box;*/ width: 500px; margin: 50px; padding: 100px; border: 1px solid black; overflow: hidden; background: yellow; } </style> </head> <body> <div></div> </body> <html>Der Browser berechnet für das div unabhängig vom margin im Boxmodell 702px, mit border-box 500px.
Schöne Grüße
Nico
-
Hallo Nico R.,
korrekt, der Margin gehört zu der Berechnung nicht dazu. Der ist immer außerhalb der Box.
Ein Boxmodell wie "margin-box" wäre auch kaum umsetzbar, weil sich Margins gegenseitig überlappen können.
Die "padding-box" gibt es, aber nicht als Option für das box-sizing, sondern bei der Angabe für background-clip, background-origin und mask.
Rolf
--
sumpsi - posui - obstruxi
-
-
-
@@Nico R.
Was möchtest Du denn eigentlich erreichen?
Das Element soll nicht sichtbar sein.
Dann ist
height: 0womöglich der falsche Weg;display: nonewäre der richtige.Was ist der Inhalt des Elements? Warum soll es nicht dargestellt werden, obwohl es im DOM ist?
Wenn Inhalt nicht visuell dargestellt wird, sollte er wohl auch nicht von Screenreadern vorgelesen werden, also nicht im accessibility tree sein.
display: nonesorgt dafür;height: 0nicht.Jolan tru
--
Wenn der Faschismus wiederkehrt, wird er nicht sagen „Hallo, ich bin der Faschismus.“ Er wird sagen: „Ich bin von Gott errettet worden.“-
Hallo Gunnar,
Was ist der Inhalt des Elements? Warum soll es nicht dargestellt werden, obwohl es im DOM ist?
hier hatte ich Robert nicht ganz vollständig geantwortet. Es handelt sich um ein select-Feld, das per Klick dynamisch per JS erzeugt wird. Das Element ist also erstmal nicht im DOM. Dann wird es mit
max-height: 0erzeugt und bekommt die Klasse zum "ausklappen", in der ichmax-heighttransitioniere. Trotz der o.g. Scherereien funktioniert das Ausklappen von Null aus, in dem ich auch padding vonpadding: 0aus transitioniere.Wenn Inhalt nicht visuell dargestellt wird, sollte er wohl auch nicht von Screenreadern vorgelesen werden, also nicht im accessibility tree sein. display: none sorgt dafür; height: 0 nicht
Bei mir ist das Element nur für einen nicht messbaren Bereich im DOM nicht sichtbar, es bekommt sofort nach der Erzeung die Klasse zum Anzeigen. Von daher sollte das hoffentlich in Ordnung sein.
Schöne Grüße
Nico
-
-
-
Dieser Beitrag wurde gelöscht: Beitrag ist Spam.
-
-
Hallo Nico R.,
du hast das schon richtig erfasst: bei box-sizing:border-box gibt height die Summe aus vertikalem Padding, vertikaler Border und Inhaltshöhe an.
Oder andersrum: height minus Border minus Padding ergibt Inhaltshöhe.
Es gibt aber eine Nebenbedingung: Inhaltshöhe >= 0.
Um die zu erfüllen, ist der Mindestwert für height die Summe aus vertikalem Padding und den Borders oben und unten.
Die Spec sagt das so:
The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified <length-percentage>. As the content width and height cannot be negative, this computation is floored at zero.
Unser Wiki erwähnt das weder im Tutorial noch auf der Referenzseite, das trage ich nach.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
so etwas in der Art dachte ich mir nach den Tests schon.
Unser Wiki erwähnt das weder im Tutorial noch auf der Referenzseite, das trage ich nach.
Danke an dich und an alle anderen fleißigen Wiki-Bienen.
Was ist hiermit? Das margin müsste eigentlich aus der Beschreibung/Berechnung raus, oder?
Schöne Grüße
Nico
-