scrollbalken bei padding

[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