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
Egenskapen text-indent
används för att ange indraget på den första raden i en text:
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>
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:
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>
Egenskapen line-height
används för att ange avståndet mellan raderna:
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>
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:
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>
Egenskapen white-space
anger hur blanksteg inuti ett element hanteras.
Det här exemplet visar hur man inaktiverar textbrytning inuti ett element:
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>
Anger utrymmet mellan tecken i en text
Anger linjehöjden
Anger indraget för den första raden i ett textblock
Anger hur blanksteg ska hanteras inuti ett element
Anger utrymmet mellan ord i en text