Margin Padding CSS Eigenschaften
    
HOME
ZURÜCK SITEMAP  

 9) Abstände
Seite: 01 02 03 04 05 06 07 08 09 10 11

  Innen- und Außenabstände

Angaben für Außenabstand (Margin) und Innenabstand (Padding) können sie für viele Selektoren und eigene Formate festlegen. Dabei können Werte für alle 4 Seiten allgemein oder jeder einzeln (oben, rechts, unten, links) und unterschiedlich definiert werden.

Erlaubte Einheiten: cm , px, pt, mm, 

margin: 10px;               /* allgemein */

margin-top: 15pt;           /* oben */
margin-right: 20px;         /* rechts */
margin-bottom: 0.4cm;       /* unten */
margin-left: 12mm;          /* links */


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.





  Einsatz für das gesamte 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 Inhalte. 
<style type="text/css">
<!--

body {

     padding:0px;

     margin-left: 20px;
     margin-right: 0px;
     margin-top: 20px;
     margin-bottom:0px;

     }

-->
</style>







<
NACH OBEN