Startseite
Umrandungen und Weißräume  
xgdown Weißräume
xgdown Umrandungen
         xgdown border-style
         xgdown border-color
         xgdown border-width
         xgdown border
xgdown Abstände

Feedback     Interesse an einer CD ?    

Weißräume

Stellen Sie sich einen Text wie einen in sich geschlossenen Kasten vor, der die folgenden Elemente enthält:

  • das Element (den Text)
  • den Weißraum um den Text oder die Grafik (padding)
  • die mögliche Umrandung (border)
  • den Randabstand um das Elememt herum (margin)
Die Größe jedes einzelnen Elementes dieses Kastens können Sie mit Hilfe der Stylesheets steuern.

Ein Weißraum ist die Fläche des Elements zu seiner Umrandung. Sie können die Größe des Weißraums für die obere, rechte, untere und linke Seite am Element angeben.

padding: Mit padding: bestimmen Sie einen einheitlichen Innenabstand zwischen Elementinhalt und den vier Elementgrenzen oben, rechts, unten und links. Erlaubt ist eine numerische Angabe.

Eine spezielle Angabe für unterschiedliche Weißräume auf jeder Seite erhalten Sie, wenn Sie für jede der vier Seiten einen bestimmten Wert angeben, beispielsweise padding:20px 25px 20px 25px. Dabei gilt folgende Ordnung: oben, rechts, unten, links.

Weitere Angaben sind:
  • padding-top = oberer Weißraum
  • padding-bottom = unterer Weißraum
  • padding-left = linker Weißraum
  • padding-right = rechter Weißraum

Beispiel:
<p style="padding:50px;font-size:16pt">Textabsatz mit
dickem Rahmen rundherum mit Innenabstand 50px</p>

Textabsatz mit dickem Rahmen rundherum mit Innenabstand 50px

 
<p style="padding:50px 40px 30px 20px;font-size:16pt">Textabsatz mit
den Abständen: oben 50px rechts 40 px unten 30 px links 20 px</p>

Textabsatz mit den Abständen: oben 50px rechts 40 px unten 30 px links 20 px

Umrandungen

border-style (Rahmentyp)

Mit dem Rahmentyp können Sie verschiedene Schmuckrahmen definieren.

border-style: Mit border-style: können Sie den Rahmentyp festlegen. Erlaubt ist eine der folgenden Angaben.
  • none = kein Rahmen (bzw. unsichtbarer Rahmen).
  • hidden = kein Rahmen (bzw. unsichtbarer Rahmen).
  • dotted = gepunktet.
  • dashed = gestrichelt.
  • solid = durchgezogen.
  • double = doppelt durchgezogen.
  • groove = 3D-Effekt.
  • ridge = 3D-Effekt (Umkehrung von groove).
  • inset = 3D-Effekt, oben und links wird die Farbe dunkler gesetzt.
  • outset = 3D-Effekt, unten und rechts wird die Farbe dunkler gesetzt.

Um für einzelne Seiten des Elements einen unterschiedlichen Rahmentyp zu bestimmen, ist es möglich bei border-style mehrere Angaben zu notieren und diese durch Leerzeichen zu trennen.

Dabei gelten folgende Regeln:
Zwei Angaben: die erste Angabe bedeutet den Rahmentyp für oben und unten, die zweite Angabe den Rahmentyp für rechts und links.
Drei Angaben: die erste Angabe bedeutet den Rahmentyp für oben, die zweite den Rahmentyp für rechts und links und die dritte den Rahmentyp für unten.
Vier Angaben: die erste Angabe bedeutet den Rahmentyp für oben, die zweite den Rahmentyp für rechts, die dritte den Rahmentyp für unten und die vierte den Rahmentyp für links.

Beispiel:

<p style="border-style:dotted;padding:5px">
Textabsatz mit Rahmentyp dotted und Pahmenabstand 5pt
<span style="color:blue">;border-style:dotted;padding:5px.</span></p>

Textabsatz mit Rahmentyp dotted und Pahmenabstand 5pt border-style:dotted;padding:5px. 


<p style="border-style:dashed;padding:5px">
Textabsatz mit Rahmentyp dashed und Pahmenabstand 5pt
<span style="color:blue">;border-style:dashed;padding:5px.</span></p>

Textabsatz mit Rahmentyp dashed und Pahmenabstand 5pt border-style:dashed;padding:5px. 


<p style="border-style:solid;padding:5px">
Textabsatz mit Rahmentyp solid und Pahmenabstand 5pt
<span style="color:blue">;border-style:solid;padding:5px.</span></p>

Textabsatz mit Rahmentyp solid und Pahmenabstand 5pt border-style:solid;padding:5px. 


<p style="border-style:double;padding:5px">
Textabsatz mit Rahmentyp double und Pahmenabstand 5pt
<span style="color:blue">;border-style:double;padding:5px.</span></p>

Textabsatz mit Rahmentyp double und Pahmenabstand 5pt border-style:double;padding:5px. 


<p style="border-style:groove;padding:5px">
Textabsatz mit Rahmentyp groove und Pahmenabstand 5pt
<span style="color:blue">;border-style:groove;padding:5px.</span></p>

Textabsatz mit Rahmentyp groove und Pahmenabstand 5pt border-style:groove;padding:5px. 


<p style="border-style:ridge;padding:5px">
Textabsatz mit Rahmentyp ridge und Pahmenabstand 5pt
<span style="color:blue">;border-style:ridge;padding:5px.</span></p>

Textabsatz mit Rahmentyp ridge und Pahmenabstand 5pt border-style:ridge;padding:5px. 


<p style="border-style:inset;padding:5px">
Textabsatz mit Rahmentyp inset und Pahmenabstand 5pt
<span style="color:blue">;border-style:inset;padding:5px.</span></p>

Textabsatz mit Rahmentyp inset und Pahmenabstand 5pt border-style:inset;padding:5px. 


<p style="border-style:outset;padding:5px">
Textabsatz mit Rahmentyp outset und Pahmenabstand 5pt
<span style="color:blue">;border-style:outset;padding:5px.</span></p>

Textabsatz mit Rahmentyp outset und Pahmenabstand 5pt border-style:outset;padding:5px.

border-color (Rahmenfarbe)

Sie können für ein Element die Rahmenfarbe bestimmen. Die Angabe dazu sollten Sie mit einer zum Rahmentyp und/oder einer zur Rahmendicke kombinieren.

border-color: Hiermit können Sie die Farbe der Umrandung einstellen. Die Angabe erfolgt als Farbname oder Hexadezimal. Auch ist der Wert transparent erlaubt.

Beispiel:

<p style="border-color:#FFFF00; border-style:solid; border-width:2px; padding:4px">
Rahmen mit
<span style="color:blue">border-color:#FFFF00; border-style:solid; border-width:2px; padding:4px
</span>formatiert.</p>

Rahmen mit: border-color:#FFFF00; border-style:solid; border-width:2px; padding:4px formatiert.

Beispiel:

<p style="border-color:red green yellow blue; border-style:solid; border-width:2px; padding:4px">
Rahmen mit
<span style="color:blue">border-color:red green yellow blue; border-style:solid; border-width:2px; padding:4px
</span>formatiert.</p>

Rahmen mit: border-color:red green yellow blue; border-style:solid; border-width:2px; padding:4px formatiert.

Beispiel:

<p style="border-color:red blue; border-style:solid; border-width:2px; padding:4px">
Rahmen mit
<span style="color:blue">border-color:red blue; border-style:solid; border-width:2px; padding:4px
</span>formatiert.</p>

Rahmen mit: border-color:red blue; border-style:solid; border-width:2px; padding:4px formatiert.

border-width (Rahmendicke)

Sie können für ein Element die Rahmendicke bestimmen. Sinnvollerweise sollten Sie diese Angabe zumindest mit einer zum Rahmentyp kombinieren, gegebenenfalls aber auch mit einer zur Rahmenfarbe.

border-width: Mit border-width: können Sie Dicke des Rahmens um ein Element bestimmen. Erlaubt ist eine numerische Angabe für die Rahmendicke oder einer der folgenden Werte:
thin = dünn
medium = mittelstark
thick = dick

Beispiel:

<p style="border-color:red blue; border-style:solid; border-width:6px; padding:4px">
Rahmen mit
<span style="color:blue">border-color:red blue; border-style:solid; border-width:6px; padding:4px
</span>formatiert.</p>

Rahmen mit: border-color:red blue; border-style:solid; border-width:6px; padding:4px formatiert.

border (Rahmen allgemein)

Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:

  • border-width
  • border-style
  • border-color

border:

Mit border: können Sie das Aussehen eines Rahmens um ein Element bestimmen. Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen. Die Reihenfolge der Einzelangaben ist egal.

Zusätzlich können bestimmte Angaben darüber gemacht werden, auf welcher Seite ein bestimmter Rand angezeigt werden soll. Dabei gilt:

border-top = oberer Rand
border-bottom = unterer Rand
border-left = linker Rand
border-right = rechter Rand

Beispiel:

<p style="border:1px solid red; padding:4px">
Rahmen mit
<span style="color:blue">border:1px solid red; padding:4px
</span>formatiert.</p>

Rahmen mit: border:1px solid red; padding:4px formatiert.

Abstände

Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:

  • margin-top
  • margin-bottom
  • margin-left
  • margin-right

margin:

Mit margin: können Sie einen einheitlichen Rand/Abstand für oben, unten, links und rechts bestimmen. Erlaubt sind ein bis vier numerische Angaben. Zusätzlich können spezielle Angaben darüber gemacht werden, auf welchen Seiten ein Abstand hinzugefügt werden soll. Dabei gilt:
margin-top = oberer Abstand
margin-bottom = unterer Abstand
margin-left = linker Abstand
margin-right = rechter Abstand

Beispiel:

<p style="border:1px solid red; padding:4px; margin:10px 20px 30px 40px">
Rahmen mit
<span style="color:blue">border:1px solid red; padding:4px; margin:10px 20px 30px 40px
</span>formatiert.</p>

Rahmen mit: border:1px solid red; padding:4px; margin:10px 20px 30px 40px formatiert.