CSS-tekstindrykning og mellemrum

Indholdsfortegnelse

Tekstmellemrum

I dette kapitel lærer du om følgende egenskaber:

text-indent
letter-spacing
line-height
word-spacing
white-space

Indrykning af tekst

Egenskaben text-indent bruges til at angive indrykning af den første linje i en tekst:

Eksempel

p {
  text-indent: 50px;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-indent: 50px;
}
</style>
</head>
<body>

<h1>Using text-indent</h1>

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

</body>
</html>

Bogstavafstand

Egenskaben bogstav-mellemrum bruges til at angive mellemrummet mellem tegnene i en tekst.

Følgende eksempel viser, hvordan man øger eller mindsker mellemrummet mellem tegn:

Eksempel

h1 {
  letter-spacing: 5px;
}
h2 {
  letter-spacing: -2px;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
  letter-spacing: 5px;
}

h3 {
  letter-spacing: -2px;
}
</style>
</head>
<body>

<h1>Using letter-spacing</h1>

<h2>This is heading 1</h2>
<h3>This is heading 2</h3>

</body>
</html>

Linjehøjde

Egenskaben line-height bruges til at angive mellemrummet mellem linjer:

Eksempel

p.small {
  line-height: 0.8;
}
p.big {
  
line-height: 1.8;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
p.small {
  line-height: 0.7;
}

p.big {
  line-height: 1.8;
}
</style>
</head>
<body>

<h1>Using line-height</h1>

<p>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>

<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>

<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>

</body>
</html>

Ordafstand

Egenskaben word-spacing bruges til at angive mellemrummet mellem ordene i en tekst.

Følgende eksempel viser, hvordan man øger eller mindsker afstanden mellem ord:

Eksempel

 p.one {
  word-spacing: 10px;
}
p.two {
  word-spacing: -2px;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  word-spacing: 10px;
}

p.two {
  word-spacing: -2px;
}
</style>
</head>
<body>

<h1>Using word-spacing</h1>

<p>This is a paragraph with normal word spacing.</p>

<p class="one">This is a paragraph with larger word spacing.</p>

<p class="two">This is a paragraph with smaller word spacing.</p>

</body>
</html>

Hvidt rum

Egenskaben hvid-mellemrum angiver, hvordan mellemrum inde i et element håndteres.

Dette eksempel viser, hvordan du deaktiverer tekstombrydning inde i et element:

Eksempel

 p {
  white-space: nowrap;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  white-space: nowrap;
}
</style>
</head>
<body>

<h1>Using white-space</h1>

<p>
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
</p>

<p>Try to remove the white-space property to see the difference!</p>

</body>
</html>

Egenskaber for CSS-tekstafstand

letter-spacing: Angiver mellemrummet mellem tegn i en tekst
line-height: Angiver linjehøjden
text-indent: Angiver indrykning af den første linje i en tekstblok
white-space: Angiver, hvordan der skal håndteres mellemrum inde i et element
word-spacing: Angiver mellemrummet mellem ord i en tekst