Äußere Abstände

Möglicherweise kennen Sie das Konzept der Ränder aus Ihrer Textverarbeitungsanwendung, z.B.: Microsoft Word, in dem Sie festlegen können, wie breit und hoch die Ränder sein sollen, wie viel Platz Sie vom Seitenrand bis zum eigentlichen Inhalt benötigen. Ränder in CSS funktionieren genauso: Sie ermöglichen es Ihnen, einen größeren Abstand zwischen Ihre Elemente zu setzen, indem Sie die gewünschten Ränder angeben. Anders ausgedrückt, der Rand ist eine äußere, unsichtbare Grenze um Ihr Element.

Der Standardwert für die Eigenschaften von margin ist "auto", was normalerweise zu Null führt. Bei einigen Elementen wird der Browser jedoch wahrscheinlich eine bestimmte Anzahl von Pixeln zum Rand hinzufügen, die Sie natürlich überschreiben können, wenn Sie möchten. Ein gutes Beispiel hierfür sind die Header-Elemente (h1-h6), das Body-Tag und Absätze - all diese Elemente werden normalerweise vom internen Stylesheet des Browsers mit Rändern versehen. Aus diesem Grund sehen Sie häufig Benutzer-Stylesheets, die den Rand auf 0 setzen - sie überschreiben alle vom Browser oder anderen Stylesheets angewendeten Ränder.

Sie können die Ränder für ein Element angeben, indem Sie eine oder mehrere der vier margin-* Eigenschaften Rand-oben, Rand-rechts, Rand-unten und Rand-links verwenden. Hier ist ein Beispiel:

<style type="text/css">
.box {
	background-color: DarkSeaGreen;
	width: 100px;
	height: 100px;
	margin-top: 10px;
	margin-right: 5px;
	margin-bottom: 10px;
	margin-left: 5px;
}
</style>

<div class="box">
	Box
</div>

Verwenden der Eigenschaft margin shorthand

Während es völlig in Ordnung ist, die margin- *Eigenschaften zu verwenden, gibt es eine sogenannte shorthand -Eigenschaft, einfach margin genannt. Damit können Sie Randwerte für alle vier Seiten definieren, ohne jedes Mal alle Eigenschaftsnamen wiederholen zu müssen. Die margin -Eigenschaft leitet Ihre Werte einfach an die Eigenschaften margin-top, margin-right, margin-bottom und margin-left weiter. Es ist also nur eine andere Möglichkeit, die CSS-Syntax zu verwenden, die Ihren Code in vielen Situationen verkürzt.

Die margin-Eigenschaft kann einen bis vier Werte annehmen. Auf diese Weise können Sie Ränder für alle vier Seiten eines Elements festlegen. Wenn jedoch alle vier Werte gleich sind, können Sie sie auf nur einen Wert kürzen, der auf alle Seiten angewendet wird. Wenn Sie den gleichen Wert für den oberen und unteren Rand haben und einen anderen Wert, der sowohl für den linken als auch für den rechten Rand gelten soll, können Sie nur zwei Werte haben. Verwirrt? Seien Sie nicht - hier ist ein Beispiel, in dem wir alle genannten Ansätze verwenden:

<style type="text/css">
.box {
	background-color: DarkSeaGreen;
	width: 100px;
	height: 100px;
}
</style>

<div class="box" style="margin: 10px 10px 10px 10px;">
	Box
</div>

<div class="box" style="margin: 10px 10px;">
	Box
</div>

<div class="box" style="margin: 10px;">
	Box
</div>

Beachten Sie, wie ich mit der ausführlichsten Methode beginne, bei der ich alle vier Werte deklariere und mich dann nach unten arbeite.

Aber in welcher Reihenfolge sollten sie sein? Und wie funktionieren die verschiedenen Versionen? Bei der Angabe von Rändern gelten folgende Regeln:

4 Werte:

1. [top margin]
2. [right margin]
3. [bottom margin]
4. [left margin]

3 Werte (nicht so häufig verwendet):

1. [top margin]
2. [left/right margin]
3. [bottom margin]

2 Werte:

1. [top/bottom margin]
2. [left/right margin]

1 Wert:

1. [top/right/bottom/left margin]

Relative Ränder

Viele Ränder werden in absoluten Werten angegeben (normalerweise Pixel, wie wir im ersten Beispiel gesehen haben), aber genau wie bei den meisten anderen größenbezogenen CSS-Eigenschaften können Sie auch relative Werte verwenden. Dies erfolgt normalerweise entweder mithilfe einer relativen Größeneinheit, beispielsweise der Einheit em (1 em entspricht der Größe der aktuellen Schriftart), oder einfach durch die Angabe eines prozentbasierten Werts.

Im nächsten Beispiel habe ich einen gemeinsamen Rand von 1em angegeben und dann für jedes der drei Kästchen eine andere Schriftgröße, gemessen in em's, angewendet:

<style type="text/css">
.box {
	background-color: DarkSeaGreen;
	width: 100px;
	height: 100px;
	margin: 1em;
}
</style>

<div class="box" style="font-size: 1em;">
	Box
</div>

<div class="box" style="font-size: 2em;">
	Box
</div>

<div class="box" style="font-size: 3em;">
	Box
</div>

Wenn Sie nun versuchen, dieses Beispiel auszuführen, werden Sie feststellen, dass der Rand jetzt relativ zur Schriftgröße ist, auch wenn die Kästchen denselben tatsächlichen Randwert haben. Dies bedeutet, dass er wächst, wenn die Schriftgröße erhöht wird. Dies ist in vielen Situationen nützlich!

Negative Ränder

Bisher haben wir nur positive Ränder verwendet, aber Sie können genauso gut negative Ränder verwenden. Dies kann verwendet werden, um ein Element näher an ein anderes Element heranzuführen oder den Effekt des Auffüllens zu negieren. Das Auffüllen wird nun im nächsten Kapitel erläutert. Da es jedoch im nächsten Beispiel verwendet wird, stellen Sie es sich als internen Rand vor - Platz, der innerhalb des Elements reserviert ist, anstatt außerhalb wie Ränder.

Schauen Sie sich dieses Beispiel an, um es zu veranschaulichen:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	padding: 10px;
	background-color: DarkSeaGreen;
}

.box-header {
	background-color: CornflowerBlue;
}
</style>

<div class="box">
	<div class="box-header">
		Header
	</div>
	Hello, world!
</div>

Dies ist eine gebräuchliche Verwendung, bei der wir ein Kästchen mit Text und einer Kopfzeile in einer anderen Farbe haben. Eine solche Box kann an vielen Stellen auf einer Seite verwendet werden, und in jedem Fall fügen wir wahrscheinlich einen Abstand hinzu, um Text und Inhalt von den Rändern der Box fernzuhalten.

Möglicherweise möchten wir jedoch eine Ausnahme für den optionalen Header machen und diesen bis zu den Rändern der Box durchgehen lassen. Wir möchten wahrscheinlich auch etwas Abstand von der Überschrift und bis zum folgenden Inhalt haben, und all dies kann mit einer korrekten Randdeklaration gelöst werden:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	padding: 10px;
	background-color: DarkSeaGreen;
}

.box-header {
	background-color: CornflowerBlue;
	margin: -10px -10px 10px -10px;
	padding: 5px 10px;
}
</style>

<div class="box">
	<div class="box-header">
		Header
	</div>
	Hello, world!
</div>

Wir verwenden einfach eine Kombination aus negativen und positiven Werten für die margin -Eigenschaft, um die Position anzupassen und den Abstand im übergeordneten Element zu kompensieren.

Zusammenfassung

Ränder werden zum Anpassen des Leerraums zwischen Elementen verwendet. Dies ist sehr nützlich, um Designs zu erstellen, die geräumig und optisch ansprechend sind. Einige Elemente verfügen über integrierte Ränder (normalerweise vom Browser vorgegeben). Sie können jedoch jederzeit eigene Randwerte definieren, diese entweder verringern oder erhöhen oder einfach auf Null zurücksetzen.

Ränder werden in absoluten (Pixel) oder relativen (Prozent oder relative Einheiten) Größen definiert und können sowohl positiv als auch negativ sein, um ein Element weg oder zu anderen Elementen zu schieben oder zu ziehen.