scrollbalken bei padding

[Henry]

Hallo,

das wollte ich eigentlich hier gefragt haben, fand aber dann doch noch die Lösung im Netz. Schreibs trotzdem mal hierein, falls jemand ähnliches Problem hat.

#toprow{
width:100%;
background-color:#333;
border-bottom:3px dotted #ccc;
padding:4%;
}

Mit padding erschien ein horizontaler Scrollbalken, auch overflow-auto brachte keine Abhilfe. Letzendlich fand ich dann: box-sizing:border-box;

#toprow{
width:100%;
background-color:#333;
border-bottom:3px dotted #ccc;
padding:4%;
box-sizing:border-box;
}

Ich verstehe zwar immer noch nicht genau, warum die Browser ansonsten ein Berechnungsproblem haben, doch damit funktionierts zumindest.

Gruss
Henry

[Felix Riesterer]

Lieber Henry,

üblicherweise bezieht sich width auf das, was ohne padding und margin übrig bleibt. Diese Berechnungsweise ist der default, wenn man box-sizing bei content-box belässt.

width:100%;
padding:4%;

Du nimmst für den Inhalt die vollen 100% und gibst zuzüglich rechts und links (und oben und unten) noch jeweils 4% dazu, was eine Gesamtbreite von 108% bedeutet. Wenn da noch vererbte margin-Werte dazu kommen, ist es noch mehr.

Letzendlich fand ich dann: box-sizing:border-box;

In meinen Augen ist das eher ein Hack, als eine Lösung, denn hier wird der Quirksmode des Internet-Explorers emuliert. Man kann das wohl mittlerweile "einfach" benutzen. "Früher" hat man dann eben die Breite berechnet: width: calc(100% - 4% - 4%); - auch wenn das hier eher doof aussieht, aber wenn padding mit einer anderen Einheit angegeben würde, sähe das schon anders aus: width: calc(100% - 4em - 4px);

Ich verstehe zwar immer noch nicht genau, warum die Browser ansonsten ein Berechnungsproblem haben, doch damit funktionierts zumindest.

Dafür verstehe ich noch immer nicht genau, warum Du Dich in diese Dinge nicht genauer einliest. Es ist ja nicht so, als erklärte das Wiki das Box-Modell nicht in aller Ausführlichkeit...

Liebe Grüße

Felix Riesterer

[Matthias Apsel]

Hallo Felix Riesterer, hallo @Henry,

Letzendlich fand ich dann: box-sizing:border-box;

In meinen Augen ist das eher ein Hack, als eine Lösung, denn hier wird der Quirksmode des Internet-Explorers emuliert.

Das sehe ich nicht so. Ich fand das ursprüngliche CSS-Boxmodell, was sich heute in box-sizing: content-box manifestiert, ziemlich unintuitiv.(1) Der alte IE hat sich zwar nicht spezifikationsgetreu verhalten (iirc nicht nur im Quirksmode) hat aber die intuitiven Vorstellungen von Abmessungen eines Objekts abgebildet. Gut auch, dass es der Wert padding-box nicht in die endgültige Spec geschafft hat.

Ich verstehe zwar immer noch nicht genau, warum die Browser ansonsten ein Berechnungsproblem haben, doch damit funktionierts zumindest.

Kein Berechnungsproblem, zweierlei Voraussetzungen. Und das Ergebnis stimmt nicht mit deinem Wunsch überein (siehe 1).

Dafür verstehe ich noch immer nicht genau, warum Du Dich in diese Dinge nicht genauer einliest. Es ist ja nicht so, als erklärte das Wiki das Box-Modell nicht in aller Ausführlichkeit...

Dito.

Bis demnächst
Matthias

[Henry]

Hallo @Matthias Apsel,@Felix Riesterer

Dafür verstehe ich noch immer nicht genau, warum Du Dich in diese Dinge nicht genauer einliest. Es ist ja nicht so, als erklärte das Wiki das Box-Modell nicht in aller Ausführlichkeit...

Dito.

und ihr solltet mal lesen was ich geschrieben habe:

…warum die Browser ansonsten ein Berechnungsproblem haben…

hat nicht mit dem Box-Modell zu tun.

Gruss
Henry

[Matthias Apsel]

Hallo Henry,

…warum die Browser ansonsten ein Berechnungsproblem haben…

Welches Berechnungsproblem meinst du?

Bis demnächst
Matthias

[Henry]

Hallo Matthias,

…warum die Browser ansonsten ein Berechnungsproblem haben…

Welches Berechnungsproblem meinst du?

Wie auch hier im Wiki beschrieben, bedeutet padding der Innanabstand. Gewöhnlich klappt das auch wie gewünscht, ohne Einfluss auf den Aussenabstand. Diesmal allerdings nicht, deshalb die Alternative mit dem Box-Modell CSS. Versteh also nicht wieso padding sich nicht nach innen richtet und den Content enstsprechend verkleinert, wie ich das sonst normalerweise erlebe.

Gruss
Henry

[Matthias Apsel]

Hallo Henry,

Wie auch hier im Wiki beschrieben, bedeutet padding der Innanabstand. Gewöhnlich klappt das auch wie gewünscht, ohne Einfluss auf den Aussenabstand. Diesmal allerdings nicht, deshalb die Alternative mit dem Box-Modell CSS. Versteh also nicht wieso padding sich nicht nach innen richtet und den Content enstsprechend verkleinert, wie ich das sonst normalerweise erlebe.

Weil du angegeben hast, dass das Element 100% breit sein soll. Und bei box-content: content-box (oder ohne eine Angabe zu box-content) ist das die Breite des Inhalts.

Kein Berechnungsproblem. Deine Vorgaben an den Browser führen zu einem Ergebnis, das nicht mit deinen Wünschen übereinstimmt. Der Browser macht genau das, was du ihm sagst. Felix hat es genau so beschrieben.

Bis demnächst
Matthias

[Henry]

Hallo Matthias,

Weil du angegeben hast, dass das Element 100% breit sein soll. Und bei box-content: content-box (oder ohne eine Angabe zu box-content) ist das die Breite des Inhalts.

Ah, wegen den 100%. Ok, das habe ich nicht gewusst, weil dachte bisher Elemente wie H1, Div, usw sind automatisch 100%, sieht ja so aus wenn man Border drum legt.

sogar bei so extremen padding taucht das Problem nicht auf:

<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;}
h1{
padding:300px;
border:3px solid red;
}
</style>
</head>
<body>
<h1>testabstand</h1>

</body>
</html>

erst wenn ich dem 100% gebe. Danke.

Gruss
Henry

[Matthias Apsel]

Hallo Henry,

Ah, wegen den 100%. Ok, das habe ich nicht gewusst, weil dachte bisher Elemente wie H1, Div, usw sind automatisch 100%, sieht ja so aus wenn man Border drum legt.

Der default-wert für width ist auto. Das sagt dem Browser: Kümmere dich selbst darum.

Bis demnächst
Matthias

[Henry]

Hallo Matthias,

Ah, wegen den 100%. Ok, das habe ich nicht gewusst, weil dachte bisher Elemente wie H1, Div, usw sind automatisch 100%, sieht ja so aus wenn man Border drum legt.

Der default-wert für width ist auto. Das sagt dem Browser: Kümmere dich selbst darum.

das ist, was mich verwirrt. Ich erzeuge eine Überschrift, setze Border darum und wenn ich dann padding hinzu gebe, habe ich innen mehr Abstand zu dem Inhalt. Das, weil, laut deiner Aussage, ich dem Browser überlasse wie er damit unzugehen hat. Ok. Nun gebe ich aber dem Element 100% Breite, der Browser denkt sich, diese Breite betrifft den Inhalt nicht den Container wo der Inhalt drin steht. Und somit kann er nicht auch noch einen Innenabstand ausführen, bleibt nur die Flucht nach aussen, verhält sich in dem Moment also wie Margin.

Also ist die eigentliche Frage, wieso bezieht ein Browser sich auf den Content und nicht auf das umgebene Element, dem habe ich schließlich die 100% gegeben. Weils vererbt wird? Ja, das könnte sein.

Gruss
Henry

[Der Martin]

Hallo Henry,

Der default-wert für width ist auto. Das sagt dem Browser: Kümmere dich selbst darum.

das ist, was mich verwirrt. Ich erzeuge eine Überschrift, setze Border darum und wenn ich dann padding hinzu gebe, habe ich innen mehr Abstand zu dem Inhalt. Das, weil, laut deiner Aussage, ich dem Browser überlasse wie er damit unzugehen hat. Ok. Nun gebe ich aber dem Element 100% Breite, der Browser denkt sich, diese Breite betrifft den Inhalt nicht den Container wo der Inhalt drin steht. Und somit kann er nicht auch noch einen Innenabstand ausführen, bleibt nur die Flucht nach aussen, verhält sich in dem Moment also wie Margin.

nicht ganz - den Unterschied zwischen padding und margin siehst du, wenn zusätzlich noch ein border oder ein background im Spiel ist.

Gibst du keine Breite an (lässt es also beim Defaultwert auto), macht der Browser das Element so breit wie möglich und berechnet die Breite des Inhalts automatisch aus verfügbarer Breite minus margin minus border minus padding.

Setzt du die Breite (des Inhalts) auf 100%, hält sich der Browser daran und addiert dazu noch padding, border und margin. Das Element wird also insgesamt breiter als 100%.

Also ist die eigentliche Frage, wieso bezieht ein Browser sich auf den Content und nicht auf das umgebene Element, dem habe ich schließlich die 100% gegeben. Weils vererbt wird?

Nee, weil's so definiert ist. Wie schon erwähnt: Bei alten IE-Versionen (IE8 war AFAIR der erste, der's richtig konnte) war es so, dass sich die Breite auf das gesamte Element einschließlich padding (und AFAIK margin) bezog. Damals ein Verstoß gegen die Spezifikation, die box-sizing-Eigenschaft gab's noch nicht.
Daher musste man oft böse tricksen, wenn ein Layout mit definierten Breiten im IE und in standardkonformen Browsern annähernd gleich aussehen sollte.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Gibst du keine Breite an (lässt es also beim Defaultwert auto), macht der Browser das Element so breit wie möglich

Wenn die display-Eigenschaft des Elements den Wert block hat. Bei inline macht der Browser das Element so schmal wie möglich.

Daher musste man oft böse tricksen, wenn ein Layout mit definierten Breiten im IE und in standardkonformen Browsern annähernd gleich aussehen sollte.

Der Trick war eine DOCTYPE-Angabe, die den Browser in den Standard-Modus schickt. Deshalb schleppen wir das sonst eigentlich völlig unnütze <!DOCTYPE html> immer noch mit uns rum.

😷 LLAP

[Der Martin]

Hallo Gunnar,

Gibst du keine Breite an (lässt es also beim Defaultwert auto), macht der Browser das Element so breit wie möglich

Wenn die display-Eigenschaft des Elements den Wert block hat.

ja, das hatte ich hier impliziert. Aber gut, wenn du es trotzdem noch ansprichst.

Bei inline macht der Browser das Element so schmal wie möglich.

Genua.[tm]

Daher musste man oft böse tricksen, wenn ein Layout mit definierten Breiten im IE und in standardkonformen Browsern annähernd gleich aussehen sollte.

Der Trick war eine DOCTYPE-Angabe, die den Browser in den Standard-Modus schickt.

Das meine ich nicht; wenn mich nicht alles täuscht, hatte man das korrekte Box Model bei Microsoft erst ab IE8 "auf Wunsch" realisiert.

Ich meinte die Verschachtelung von mehreren scheinbar unnötigen Blockelementen, um möglichst alle "Schrauben" einzeln drehen zu können.

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Martin,

das Boxmodell wurde mit IE 6 gefixt. Ohne <!doctype> schickt den IE in die Prä-XP Zeit zurück, zum IE 5.5, der den Namen Quirks noch aufrichtiger verdient als seine Folge-Inkarnationen.

Rolf

[Gunnar Bittersmann]

@@Der Martin

wenn mich nicht alles täuscht, hatte man das korrekte Box Model bei Microsoft erst ab IE8 "auf Wunsch" realisiert.

Hm, weiß nicht mehr.

Und die Korrektheit liegt im Auge des Betrachters. Besser wär’s wohl gewesen, man hätte das Verhalten des IE als Standard definiert; d.h. border-box wäre der Defaultwert der box-sizing-Eigenschaft (die es damals freilich noch nicht gab).

😷 LLAP

[Der Martin]

Hallo,

wenn mich nicht alles täuscht, hatte man das korrekte Box Model bei Microsoft erst ab IE8 "auf Wunsch" realisiert.

Hm, weiß nicht mehr.

ich wohl auch nicht. Aber Rolf wusste es noch: Nicht erst mit IE8, wie ich dachte, sondern IE6.

Und die Korrektheit liegt im Auge des Betrachters. Besser wär’s wohl gewesen, man hätte das Verhalten des IE als Standard definiert

Den Standpunkt habe ich seinerzeit auch immer vertreten, aber wenn ich mich getraut habe, diese Meinung zu äußern, wehte mir immer ein stürmischer Wind der Entrüstung aus der ganzen Forengemeinde entgegen. 😉

Live long and pros healthy,
 Martin