 9) Abstände (margin padding)
Innen- und Außenabstände können Sie mit CSS-Angaben genau bestimmen. In einigen Fällen wollen Sie auch sicherstellen, dass die Abstände 0 (Null) sind.
|
|
Möglichkeiten der Bestimmung von Abständen
 siehe auch unterschiedliche Schreibweisen (14)
Innen- und Außenabstände
Mit CSS-Anweisungen für Außenabstand (Margin) und Innenabstand (Padding) können Sie für viele Selektoren eigene Formate festlegen. Dabei können die Werte für alle 4 Seiten (oben, rechts, unten, links) mit einer Anweisung oder für die 4 Seiten mit separaten Anweisungen definiert werden. Die Angaben können unterschiedliche oder gleiche Werte haben.
Erlaubte Einheiten: cm , px, pt, mm,
margin: 10px; /* alle gleich */
margin: 10px 10px 10px 10px;
margin-top: 15px; /* oben */
margin-right: 20px; /* rechts */
margin-bottom: 15px; /* unten */
margin-left: 12px; /* links */
margin: 15px 20px 15px 12px;
padding: 10px; /* allgemein */
padding-top: 15pt; /* oben */
padding-right: 20px; /* rechts */
padding-bottom: 0.4cm; /* unten */
padding-left: 12mm; /* links */
Häufig wird in diesem Zusammenhang der Rand ebenfalls bestimmt.
Die Grafik soll die Zusammenhänge übersichtlich veranschaulichen:
Beispiel der Absatzformatierung (Text) - Selektor <p>:
Angaben für Rand (1) + Padding (5) (Margin ist nicht festgelegt)
<p style="padding:5px; border:1px solid #0090E0"> ... </p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
Angaben für Rand, Padding + Margin
<p style="margin-left:50px;padding:5px; border:1px solid #0090E0"> ... </p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
Schreibweise der Notierung
Beispiel: Einsatz für das eigentliche HTML-Dokument <body>
Nicht zu vergessen, und doch häufig ignoriert sind Margin- und Padding-Angaben für den Body-Bereich. Besonders wichtig für punktgenau positionierte Seiteninhalte.
<style type="text/css">
<!--
body {
padding:0px;
margin-left: 20px;
margin-right: 0px;
margin-top: 20px;
margin-bottom:0px;
}
-->
</style>
Ebenfalls gültig:
Reihenfolge: oben, rechts, unten, links
<style type="text/css">
<!--
body {
padding:0px;
margin: 20px 0px 20px 0px;
}
-->
</style>
Ebenfalls gültig:
Null-Angaben sind ohne Einheit gültig
<style type="text/css">
<!--
body {
padding:0px;
margin: 20px 0 20px 0;
}
-->
</style>
Beispiele
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<img style="float:right;margin-left:25px;" src="bild.jpg" ....
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<img align="right" style="margin-left:25px;" src="bild.jpg" ....
| 
Home • CSS • Margin + Padding