Alle folgenden Boxen sind "div-Elemente" und entsprechen so den "üblichen" Blockelementen wie p, h, ul, li etc. (anders img und a als Inline-elemente!)

Box 1: Blockelemente nehmen die ganze verfügbare Breite des sie umgebenden Elementes ein
Box 2
Box 3

Weil Blockelemente einen Zeilenumbruch eingebaut haben, ändert auch eine Begrenzung der Breite mit "width: 20%;" nichts daran, dass sie untereinander angeordnet werden!

Box 1: width:20%
Box 2 width:20%
Box 3 width:20%

Erst die Veränderung der Darstellungsweise (display: inline; also wie ein Inlineelement behandeln) ordnet die Elemente nebeneinander an. Nur wenn der Platz zu knapp wird, wird in die nächste Zeile geschoben. Verkleinere das Browser-Fenster und beobachte den Effekt. margin und padding (oben/unten) führt hierbei zu unschönen Überlagerungseffekten!

Box 1
Box 2
Box 3
Box 4
Box 5
Box 6