Boxenmodell: der Außenrand

Der Außenrand

Der Außenrand wird ähnlich dem Innenrand mit der Eigenschaft MARGIN geregelt.
Lässt man Padding-Angaben weg, dann bilden die Margin-Werte den Abstand des sichtbaren Textes zum Bildschirmrand.

  1. margin-left: regelt den Abstand zum linken Bildschirmrand
  2. margin-right: regelt den Abstand zum rechten Bildschirmrand
  3. margin-top: regelt den Abstand zum oberen Bildschirmrand
  4. margin-bottom: regelt den Abstand zum unteren Bildschirmrand
  5. margin: alle Werte (left, right, top, bottom) erhalten< denselben Wert

Variationen:

  1. Feste Pixel-Angaben
    1. margin-left:30px;
    2. margin-top:10px;
    3. margin-right:30px;
    4. margin-bottom:<15px;
    5. margin:20px;
  2. Proportionale Angaben
    1. <margin-left:5%;
    2. margin-top:3%;
    3. margin-right:5%;
    4. margin-bottom:2%;
    5. margin:10%;
  3. Die relative Angabe M
    1. margin-left:3em;
    2. margin-top:1em;
    3. margin-right:2em;
    4. margin-bottom:1,5em
    5. margin:1em;

Übung

  1. Öffnen Sie aus dem Verzeichnis „max_moritz“ die Datei „dritter_streich.html“.
  2. Erzeugen Sie mit einem geeigneten Editor folgende CSS-Datei.
  3. Benennen Sie diese uebung03.css
  4. Speichern Sie sie im selben Verzeichnis ab.
  5. Verlinken Sie diese anschließend in die HTML-Seite.
  6. Beobachten Sie die jeweilige Auswirkung auf die Webseite.

uebung03.css

body { background-color: Green; font-family: font-family: Arial, sans-serif; color: white;}
h1{background-color: #FF7FFF; margin-left: 10%;}
h3 {background-color: #800040; color: white; margin-left: 2em;}
p { margin-left: 25%;}

Übung 4

  1. Öffnen Sie aus dem Verzeichnis „max_moritz“ die Datei „vierter_streich.html“.
  2. Erzeugen Sie mit einem geeigneten Editor folgende CSS-Datei.
  3. Nennen Sie diese „uebung04.css“.
  4. Speichern Sie diese im selben Verzeichnis ab.
  5. Binden Sie diese in die Webseite ein.
  6. Beobachten Sie die Wirkung auf die Webseite.

uebung04.css

body {background-color: #9D9EFF; font-family: font-family: Arial, sans-serif;}
h1{background-color: #626100; margin-left: 10%;}
h3 {background-color: #FEFF00; padding-left: 2em;}
p {background-color: #FF99FF; margin-left: 10%; padding-left: 15%;}