CSS-textindrag och mellanrum


Innehållsförteckning

    Visa innehållsförteckning


Textavstånd

I det här kapitlet kommer du att lära dig om följande egenskaper:

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

Textindrag

Egenskapen text-indent används för att ange indraget på den första raden i en text:

Exempel

p {
  text-indent: 50px;
}

Prova själv →

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



Teckenavstånd

Egenskapen bokstavsmellanrum används för att specificera mellanrummet mellan tecknen i en text.

Följande exempel visar hur man ökar eller minskar utrymmet mellan tecken:

Exempel

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

Prova själv →

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



Radavstånd

Egenskapen line-height används för att ange avståndet mellan raderna:

Exempel

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

Prova själv →

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




Ordavstånd

Egenskapen ord-mellanrum används för att ange utrymmet mellan orden i en text.

Följande exempel visar hur man ökar eller minskar utrymmet mellan ord:

Exempel

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

Prova själv →

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



Vitt utrymme

Egenskapen white-space anger hur blanksteg inuti ett element hanteras.

Det här exemplet visar hur man inaktiverar textbrytning inuti ett element:

Exempel

 p {
  white-space: nowrap;
}

Prova själv →

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



Egenskaper för CSS-textavstånd

letter-spacing

Anger utrymmet mellan tecken i en text

line-height

Anger linjehöjden

text-indent

Anger indraget för den första raden i ett textblock

white-space

Anger hur blanksteg ska hanteras inuti ett element

word-spacing

Anger utrymmet mellan ord i en text