allgemeine Vorgaben, Konzept für Innen- und Aussenabstände, Klassen ... Beispiel gesucht

[Rolf B]

Hallo michaah,

ui, das ist schwerer Tobak.

Der grundsätzliche Unterschied von Margin und Padding ist:

(1) Margins können überlappen. D.h. wenn ich zwei Boxen übereinander habe, und beide haben margin:2em, dann ist der Abstand zwischen den Boxen 2em, nicht 4em.

(2) Margins können über das Parent-Element hinausgreifen. Ich habe bspw. ein figure-Element mit margin:1em und padding:0. Darin ist ein p Element mit margin:2em. Nun kommt es darauf an, ob das figure-Element eine Blockformatierungsumgebung (BFU) aufbaut (siehe MDN, unser Wiki ist da nicht gut bzw. auch falsch bestückt). Mit BFU bleibt der Margin des p Elements in der Figure. Ohne BFU wird das p an den Innenrand des figure gesetzt, sein Margin greift über das figure-Element hinaus und würde ihn in diesem Beispiel vergrößern.

(3) Padding kann zur Größe des Elements gehören (siehe block-sizing Eigenschaft und Jahrzehnte des Quirksmode im Internet-Explorer), Margin nie.

Bestimmt gibt's noch mehr, und genau diese Unterschiede muss man kennen, um zu wissen, ob padding oder margin besser ist. Oft ist es aber auch einfach wurscht.

Rolf