CSS verfügt über mehrere verschiedene Einheiten zum Ausdrücken einer Länge.
Viele CSS-Eigenschaften nehmen „Längen“-Werte an, wie zum Beispiel:
width, margin, padding, font-sizeLänge ist eine Zahl gefolgt von einer Längeneinheit, wie zum Beispiel:
10px, 2emLegen Sie unterschiedliche Längenwerte fest, indem Sie px (Pixel) verwenden:
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Hinweis: Zwischen der Zahl und der Einheit darf kein Leerzeichen stehen. Wenn der Wert jedoch ist 0, die Einheit kann weggelassen werden.
Für einige CSS-Eigenschaften sind negative Längen zulässig.
Es gibt zwei Arten von Längeneinheiten: absolut und relativ.
Die absoluten Längeneinheiten sind fest und eine Länge, die in einer dieser Einheiten ausgedrückt wird, wird als genau diese Größe angezeigt.
Absolute Längeneinheiten werden für die Verwendung auf Bildschirmen nicht empfohlen, da die Bildschirmgrößen sehr unterschiedlich sind. Sie können jedoch verwendet werden, wenn das Ausgabemedium bekannt ist, z was das Drucklayout betrifft.
cm
Beschreibung:Zentimeter
Versuch es
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 1.5cm;}
h2 {font-size: 1cm;}
p {
font-size: 0.5cm;
line-height: 1cm;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
mm
Beschreibung:Millimeter
Versuch es
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 15mm;}
h2 {font-size: 10mm;}
p {
font-size: 5mm;
line-height: 10mm;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
in
Beschreibung: Zoll (1 Zoll=96 Pixel=2,54 cm)
Versuch es
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 1in;}
h2 {font-size: 0.5in;}
p {
font-size: 0.2in;
line-height: 0.5in;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
px *
Beschreibung: Pixel (1 Pixel=1/96 von 1 Zoll)
Versuch es
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 50px;}
h2 {font-size: 30px;}
p {
font-size: 15px;
line-height: 20px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
pt
Beschreibung: Punkte (1 Punkt=1/72 von 1 Zoll)
Versuch es
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 50pt;}
h2 {font-size: 25pt;}
p {
font-size: 15pt;
line-height: 25pt;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
pc
Beschreibung: picas (1 Stück=12 pt)
Versuch es
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 4.5pc;}
h2 {font-size: 3pc;}
p {
font-size: 1.5pc;
line-height: 3pc;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
* Pixel (px) beziehen sich auf das Anzeigegerät. Bei Geräten mit niedriger Auflösung entspricht 1 Pixel einem Gerätepixel (Punkt) der Anzeige. Für Drucker und hohe Auflösung Bildschirme 1 Pixel implizieren mehrere Gerätepixel.
Relative Längeneinheiten geben eine Länge relativ zu einer anderen Längeneigenschaft an. Relative Längeneinheiten lassen sich zwischen verschiedenen Rendering-Medien besser skalieren.
em
Beschreibung: Relativ zur Schriftgröße des Elements (2em bedeutet 2-fache Größe der aktuellen Schriftart)
Versuch es
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 16px;
line-height: 2em;
}
div {
font-size: 30px;
border: 1px solid black;
}
span {
font-size: 0.5em;
}
</style>
</head>
<body>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 0.5em, which equals to 0.5x30 = 15px</span>.</div>
</body>
</html>
ex
Beschreibung: Relativ zur x-Höhe der aktuellen Schriftart (selten verwendet)
Versuch es
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-size: 30px;
border: 1px solid black;
}
span {
font-size: 1ex;
}
</style>
</head>
<body>
<div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 1ex</span>.</div>
</body>
</html>
ch
Beschreibung: Relativ zur Breite der „0“ (Null)
Versuch es
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size:16px;
}
div {
font-size: 3ch;
border: 1px solid black;
}
</style>
</head>
<body>
<p>The font-size of this document is 16px.</p>
<div>The font-size of this div element is 3ch.</div>
<p>The ch unit sets the font-size relative to the width of the character "0".</p>
</body>
</html>
rem
Beschreibung: Relativ zur Schriftgröße des Stammelements
Versuch es
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size:16px;
}
div {
font-size: 2rem;
border: 1px solid black;
}
</style>
</head>
<body>
<p>The font-size of this document is 16px.</p>
<div>The font-size of this div element is 2rem.</div>
<p>The rem unit sets the font-size relative to the browsers base font-size, and will not inherit from its parents.</p>
</body>
</html>
vw
Beschreibung: Bezogen auf 1 % der Breite des Ansichtsfensters*
Versuch es
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 20vw;
}
</style>
</head>
<body>
<h1>Hello</h1>
<p>Resize the width of the browser window to see how the font-size of h1 changes.</p>
<p>1vw = 1% of viewport width.</p>
</body>
</html>
vh
Beschreibung: Relativ zu 1 % der Höhe des Ansichtsfensters*
Versuch es
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 20vh;
}
</style>
</head>
<body>
<h1>Hello</h1>
<p>Resize the height of the browser window to see how the font-size of h1 changes.</p>
<p>1vh = 1% of viewport height.</p>
</body>
</html>
vmin
Beschreibung: Im Verhältnis zu 1 % der kleineren Größe des Ansichtsfensters*
Versuch es
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 15vmin;
}
</style>
</head>
<body>
<h1>Hello</h1>
<p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p>
<p>1vmin = 1vw or 1vh, whichever is smaller.</p>
</body>
</html>
vmax
Beschreibung: Bezogen auf 1 % der größeren Dimension des Ansichtsfensters*
Versuch es
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 15vmax;
}
</style>
</head>
<body>
<h1>Hello</h1>
<p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p>
<p>1vmax = 1vw or 1vh, whichever is larger.</p>
<p>The vmax unit is not supported in Internet Explorer or Safari 6.1 and earlier versions.</p>
</body>
</html>
%
Beschreibung:Relativ zum übergeordneten Element
Versuch es
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size:16px;
}
div {
font-size: 150%;
border: 1px solid black;
}
</style>
</head>
<body>
<p>The font-size of this document is 16px.</p>
<div>The font-size of this div element is 150%.</div>
<p>The % unit sets the font-size relative to the current font-size.</p>
</body>
</html>
Tipp: Die em- und rem-Einheiten sind praktisch, um perfekte Ergebnisse zu erzielen Skalierbares Layout!
* Viewport=die Größe des Browserfensters. Wenn das Ansichtsfenster 50 cm beträgt breit, 1vw=0,5cm.
Die Zahlen in der Tabelle geben die erste Browserversion an, die das vollständig unterstützt Längeneinheit.
| Length Unit | |||||
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 12.0 | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |