Gerade am Anfang leidet man darunter. - Die Frage wo der Unterschied zwischen padding und marginist. Doch das und vieles Mehr werden wir in diesem Tutorial klären:
Die CSS-Box, sprich die Befehle um Dinge anzuordnen ist in mehrere Ebenen verteilt. Diese behandeln wir nun nach und nach.

• Inhalt:
Wir benötigen natürlich einen Inhalt mit dem wir arbeiten können. Dieses werden wir kurz in HTML schreiben.


• Innenabstand (padding):
Kommen wir zum ersten Befehl der überhaupt irgendetwas verschiebt. Der padding-Befehl. Dieser sorgt für einen Innenabstand in einer Box. Sprich z.B. den Abstand des Absatzes vom Containerrand.


• Rahmen (border):
Ein grundlegender Befehl, den man in den ersten Minuten bzw. Stunden CSS lernt. Der border-Befehl zieht einen Rahmen um den selektierten Bereich.


• Hintergrundfarbe (background-color):
Den Hintergrund einfärben gehört zu den ersten Aktionen in CSS und sollte auch nichts neues mehr darstellen.


• Außenabstand (margin):
Jetzt kommen wir zu margin. Das ich nämlich das größte Problem der meisten. Padding und Margin verwechselt man schnell und dann kommt es zu ungewollten Anzeigefehlern. Margin ist für den Außenabstand zuständig. Damit kann man z.B. ganze div-Container verschieben und den Abstand vom Rand des div-Container bis zum Rand der Anzeige verringern bzw. vergrößern.


• Endergebnis.
Am Ende sähe das ganze folgendermaßen aus, sollte man alle Befhele zusammenschmeissen: