Um zu verstehen, wie sich CSS Padding vs. Margin auf die Formatierung und den Look Ihrer Website auswirkt, benötigen Sie zunächst das Wissen um einige HTML-Grundlagen. In der Auszeichnungssprache können Sie eine ganze Reihe verschiedener Elemente erstellen, die am Ende auf einer Webpräsenz erscheinen. Innerhalb dieser Elemente ist zwischen zwei Gruppen zu unterscheiden: den Inline- und den Block-Elementen.
Bei Inline-HTML-Elementen handelt es sich um solche Elemente, die mit dem Text Ihrer Website zusammenfließen und die keinen eigenen Absatz benötigen. Typische Beispiele hierfür sind das em– oder das b-Tag, die bereits im HTML-Skript dafür sorgen, dass der Inhalt zwischen dem öffnenden und dem schließenden Tag im Webbrowser als kursiv oder fettgedruckt dargestellt wird.
Im Gegensatz zu Inline-Elementen benötigen die ihnen übergeordneten Block-Elemente einen eigenen Absatz. Sie können sich Block-Elemente dementsprechend als eine Art Kasten vorstellen, der über die gesamte Breite Ihres Bildschirmes reicht. Analog dazu können Sie die Breite und Höhe von Block-Elementen natürlich anpassen, sodass der Kasten relativ zum Bildschirm verkleinert oder auch vergrößert wird. Block-Elemente können relativ zueinander ausgerichtet werden und sind somit wesentlicher Bestandteil für das Layout einer Website. Typische Vertreter dieser Kategorie von HTML-Elementen sind beispielsweise die Überschriften h1 bis h6 sowie der div-Container.