Hallo,

kann mir jemand mal erklären, weswegen Padding die Breite eines DIV-Containers beeinflusst?

Wenn ich beispielsweise schreibe:

<div style="width:100px; border:1px solid red; padding:10px">

Dann ist die tatsächliche Breite 122px und nicht 100px.

Woran liegt das eigentlich?

Browser: Safari

Weil das so definiert ist?
Das war schon immer so, bis auf den IE unter Windows bis 5.5, was ein entsprechender Bug war und seit dem 6er gefixet ist.

CSS Box model , ,

Hallo,

also, aus rein logischer Sicht würde ich sagen, die Breite bleibt bei 100px und der Inhalt meinetwegen Absätze - p - haben dann einen Abstand von 10px nach links, rechts, oben und unten.

Ich mein, wenn ich mein Regal 1 m weiter weg von der Wand stelle, wird mein Haus auch nicht größer

Border werden immer oben drauf gerechnet, wie es mit dem Padding ist, ist mir nicht bekannt

Trag das doch mal bei der w3c vor

Es müssen dann nur 1 billionen Webseiten umgebaut werden hehe

Schau dir die Zeichnungen der Links an, die ich gegeben habe. Sehr schön auch der letzte Link. Besser kann man es kaum erklären.

Von innen nach außen wird ALLES aufaddiert: content + padding + border + margin = Gesamtmaß

Ja, von der Reihenfolge war mir alles klar, das mit dem Border habe ich feststellen müssen, als ich mit Xscope meine Website vermessen habe, aber das mit dem Padding habe ich nicht gewusst, allerdungs nutze ich auch meist margin, wenn möglich

Na, am "Box-Modell" natürlich.

Für derlei Grundlagen find' ich "Little-Boxes" ganz nett, siehe bspw.:
(da kann man das ganze erste Buch online lesen)

Bild von little-boxes.de

.
.
.
Übrigens.

Warum hast Du so einen leeren Kopf
.
.
.