Wenn wir schon länger in dieser Branche zu tun haben, werden wir die Leiden des Webdesigners in Bezug auf die Wahl der richtigen Abstände zwischen den Elementen eines Designs kennen. Vielleicht haben wir auch das Grundlagen-HTML-Tutorial (~Link~) auf dieser Seite durchgearbeitet und kennen daher die Schwierigkeiten, die einem die Abstände bereiten können.
Damit wir unseren Code nicht ausschließlich mit <br> und zumüllen müssen, um zu einem eher unpräzisen Ergebnis zu kommen, stellt CSS ein paar einfache Propertys zur Verfügung.
Der Einfachheit halber werden die Codebeispiele in diesem und in den folgenden Artikeln wieder HTML und CSS in einer Datei vereinen. Lassen wir sich davon aber nicht beirren, wir verfügen bereits über die nötige Kompetenz um wir auf korrekte Weise voneinander zu trennen und das separate Stylesheet einzubinden.
Sehen wir uns nun folgenden Beispielcode an:
<!DOCTYPE html>
<html>
<head>
<title> Mein Seitentitel </title>
<style>
</style>
</head>
<body>
<h1>Ich bin eine Überschrift</h1>
<p>Ich bin der erste Absatz.</p>
<p>Ich bin der zweite Absatz.</p>
</body>
</html>
Gemäß den Standardeinstellungen unseres Browsers werden wir mehr oder weniger große Abstände zwischen den Zeilen sehen. Erfahrungsgemäß ist der Abstand unter Überschriften größer. Diese Abstände werden in CSS (englisch) margin genannt und, ähnlich wie bei den Schriftgrößen, in Pixel- oder Prozentwerten angegeben.
Wir werden nun die Standardeinstellung in Ihrem Browser mit folgendem Code überschreiben.
<!DOCTYPE html>
<html>
<head>
<title> Mein Seitentitel </title>
<style>
H1 {
margin: 200px;
}
</style>
</head>
<body>
<h1>Ich bin eine Überschrift</h1>
<p>Ich bin der erste Absatz.</p>
<p>Ich bin der zweite Absatz.</p>
</body>
</html>
Das Ergebnis dieses Codes wird ein anderes Bild geben als wir vermutlich erwartet haben. Es hat sich jetzt nicht nur der Abstand zur nächsten Zeile vergrößert (auf 200 Pixel), sondern die Überschrift ist auch nach rechts innen und nach unten gerückt.
Das liegt daran, dass margin die Abstände in alle Richtungen (also links, rechts, oben und unten) gleichzeitig angibt. Wir können für bestimmte Richtungen einzelne Werte definieren, indem wir gezielt ansprechen mit margin-top, margin-bottom, margin-left und margin-right. Wir erreichen also das gewünschte Ergebnis, den Abstand von Überschrift zur nächsten Zeile zu erhöhen indem wir den CSS-Code wie folgt abändern:
h1 {
Margin-bottom: 200px;
}
Für margins sind im Übrigen auch negative Werte zugelassen. Wenn wir den Abstand also, über das Normalmaß hinaus verkleinern wollen (die Schrift kann dabei überlappen), könnte die Angabe wie folgt aussehen:
h1 {
Margin-bottom: -30px;
}