diedVIPs

html knowhow

Abstände













Das Boxmodell definiert
1. margin als Abstand,
2. border um das Element.
3. padding als Polster 

margin legt einen Abstand gegen benachbarte Elemente fest und auch den Abstand vom umfassenden Element.

Abstände
margin margin wird verwendet, um Platz um Elemente herum außerhalb definierter Grenzen zu schaffen.
  • <length>
  • <percentage>
  • inherit
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

p {margin: 25px 50px 75px 100px;}
margin-top Außenabstand oben
  • <length>
  • <percentage>
  • inherit
margin-bottom Außenabstand unten
  • <length>
  • <percentage>
  • inherit
margin-left Außenabstand links
  • <length>
  • <percentage>
  • inherit
margin-right Außenabstand rechts
  • <length>
  • <percentage>
  • inherit
 
padding Padding wird verwendet, um innerhalb von definierten Grenzen Platz um den Inhalt eines Elements zu schaffen.
  • <length>
  • <percentage>
  • inherit
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
padding-top Innenabstand oben
  • <length>
  • <percentage>
  • inherit
padding-bottom Innenabstand unten
  • <length>
  • <percentage>
  • inherit
padding-left Innenabstand links
  • <length>
  • <percentage>
  • inherit
padding-right Innenabstand rechts
  • <length>
  • <percentage>
  • inherit
letter-spacing Buchstaben-Abstand.
Definiert den Abstand zwischen den Zeichen eines Textblocks.
  • <length>
  • <percentage>
  • normal
  • inherit
.first-example { letter-spacing: 0.4em; }
.second-example { letter-spacing: 1em; }
.third-example { letter-spacing: -0.05em; }
line-height Zeilenhöhe
legt die Zeilenhöhe für verschiedene <div>-Elemente fest.
  • <number>
  • <length>
  • <percentage>
  • normal
  • inherit
div.a {line-height: normal;}
div.b {line-height: 1.6;}
div.c {line-height: 80%;}









Kontakt    Datenschutz   Impressum