Odsazení a mezery textu CSS

Obsah

Mezery textu

V této kapitole se dozvíte o následujících vlastnostech:

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

Odsazení textu

Vlastnost text-indent se používá k určení odsazení prvního řádku textu:

Příklad

p {
  text-indent: 50px;
}

Zkuste to sami →

<!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>

Mezery mezi písmeny

Vlastnost letter-spacing se používá k určení mezery mezi znaky v textu.

Následující příklad ukazuje, jak zvětšit nebo zmenšit mezeru mezi znaky:

Příklad

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

Zkuste to sami →

<!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>

Výška řádku

Vlastnost line-height se používá k určení mezery mezi řádky:

Příklad

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

Zkuste to sami →

<!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>

Mezery mezi slovy

Vlastnost mezera mezi slovy se používá k určení mezery mezi slova v textu.

Následující příklad ukazuje, jak zvětšit nebo zmenšit mezeru mezi slova:

Příklad

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

Zkuste to sami →

<!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>

Bílý prostor

Vlastnost white-space určuje, jak se zachází s mezerami uvnitř prvku.

Tento příklad ukazuje, jak zakázat zalamování textu uvnitř prvku:

Příklad

 p {
  white-space: nowrap;
}

Zkuste to sami →

<!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>

Vlastnosti rozestupu textu CSS

letter-spacing: Určuje mezeru mezi znaky v textu
line-height: Určuje výšku řádku
text-indent: Určuje odsazení prvního řádku v textovém bloku
white-space: Určuje, jak zacházet s mezerami uvnitř prvku
word-spacing: Určuje mezeru mezi slovy v textu