Mengatur Spasi Tulisan Dengan CSS

Mengatur Spasi Tulisan

Pada bagian ini akan mempelajari tentang properti berikut:

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

Text Indent

Properti text-indent digunakan untuk menentukan jarak spasi indent pada baris pertama pada tulisan:

Contoh

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

<h1>Menggunakan properti text-indent</h1>

<p>Di tahun-tahun saya yang lebih muda dan lebih rentan, ayah saya memberi saya beberapa nasihat yang selalu saya ingat sejak saat itu. 'Setiap kali Anda ingin mengkritik seseorang,' katanya kepada saya, 'ingatlah bahwa semua orang di dunia ini tidak memiliki kelebihan seperti yang Anda miliki.'</p>

</body></html>

Jalankan Contoh

Letter Spacing

Properti letter-spacing digunakan untuk menentukan spasi antar karakter dalam tulisan.

Contoh berikut menunjukkan cara menambah atau mengurangi spasi antar karakter:

Contoh

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

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

<h1>Menggunakan properti letter-spacing</h1>

<h2>Ini judul 1</h2>
<h3>Ini judul 2</h3>

</body></html>

Jalankan Contoh

Line Height

Properti line-height digunakan untuk menentukan besar ruang atau jarak antar baris:

Contoh

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

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

<h1>Menggunakan properti line-height</h1>

<p>
Ini adalah paragraf dengan tinggi garis standar.<br>
Tinggi baris default di sebagian besar browser adalah sekitar 110% hingga 120%.<br>
</p>

<p class="small">
Ini adalah paragraf dengan tinggi baris yang lebih kecil.<br>
Ini adalah paragraf dengan tinggi baris yang lebih kecil.<br>
</p>

<p class="big ">
Ini adalah paragraf dengan tinggi baris yang lebih besar.<br>
Ini adalah paragraf dengan tinggi baris yang lebih besar.<br>
</p>

</body></html>

Jalankan Contoh

Word Spacing

Properti word-spacing digunakan untuk menentukan spasi antara kata dalam tulisan.

Contoh berikut menunjukkan cara menambah atau mengurangi spasi antar kata:

Contoh

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

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

<h1>Menggunakan properti word-spacing</h1>

<p>Ini adalah paragraf dengan word-spacing normal.</p>

<p class="one">Ini adalah paragraf dengan word-spacing yang lebih besar.</p>

<p class="two">Ini adalah paragraf dengan word-spacing yang lebih kecil.</p>

</body></html>

Jalankan Contoh

White Space

Properti white-space menentukan bagaimana white-space di dalam elemen.

Contoh ini menunjukkan cara menonaktifkan wrap tulisan di dalam elemen:

Contoh

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

<h1>Menggunakan properti white-space</h1>

<p>
Ini adalah beberapa teks dengan properti white-space: nowrap.
Ini adalah beberapa teks dengan properti white-space: nowrap.
Ini adalah beberapa teks dengan properti white-space: nowrap.
Ini adalah beberapa teks dengan properti white-space: nowrap.
Ini adalah beberapa teks dengan properti white-space: nowrap.
Ini adalah beberapa teks dengan properti white-space: nowrap.
Ini adalah beberapa teks dengan properti white-space: nowrap.
Ini adalah beberapa teks dengan properti white-space: nowrap.
Ini adalah beberapa teks dengan properti white-space: nowrap.
</p>

<p>Coba hapus properti white-space untuk melihat perbedaannya!</p>

</body></html>

Jalankan Contoh

Referensi Semua Properti Dekorasi Tulisan

Properti CSS letter-spacing

Contoh

Menetapkan spasi huruf untuk elemen <h1>, <h2>, dan <h3> :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: 2px;
}

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

<h1>Ini judul 1</h1>
<h2>Ini judul 2</h2>
<h3>Ini judul 3</h3>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti letter-spacing menambah atau mengurangi spasi antar karakter dalam tulisan.

Properti CSS line-height

Contoh

Menetapkan tinggi baris untuk elemen <div> :

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
  line-height: normal;
}

div.b {
  line-height: 1.6;
}

div.c {
  line-height: 80%;
}

div.d {
  line-height: 200%;
}
</style>
</head>
<body>

<h1>Properti line-height</h1>

<h2>line-height: normal (default)</h2>
<div class="a">Ini adalah paragraf dengan tinggi baris standar.<br>
Tinggi baris standar di sebagian besar browser adalah sekitar 110% hingga 120%.</div>

<h2>line-height: 1.6 (disarankan)</h2>
<div class="b">Ini adalah paragraf dengan tinggi baris yang disarankan.<br>
Tinggi baris di sini disetel ke 1,6. Ini adalah nilai tanpa unit;<br>
artinya tinggi baris akan relatif terhadap ukuran font.</div>

<h2>line-height: 80%</h2>
<div class="c">Ini adalah paragraf dengan tinggi baris yang lebih kecil.<br>
Tinggi baris di sini disetel ke 80%.</div>

<h2>line-height: 200%</h2>
<div class="d">Ini adalah paragraf dengan tinggi baris yang lebih besar.<br>
Tinggi baris di sini diatur ke 200%.</div>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti line-height dapat menentukan tinggi baris.

Catatan: Nilai negatif tidak diperbolehkan.

Contoh

Menetapkan tinggi baris dalam piksel dan sentimeter untuk elemen <div> :

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
  line-height: 10px;
}

div.b {
  line-height: 30px;
}

div.c {
  line-height: 0.5cm;
}

div.d {
  line-height: 1cm;
}
</style>
</head>
<body>

<h1>Properti line-height</h1>

<h2>line-height: 10px</h2>
<div class="a">Ini adalah paragraf dengan tinggi baris yang ditentukan.<br>
Tinggi baris di sini disetel ke 10 piksel.</div>

<h2>line-height: 30px</h2>
<div class="b">Ini adalah paragraf dengan tinggi baris yang ditentukan.<br>
Tinggi baris di sini disetel ke 30 piksel.</div>

<h2>line-height: 0,5 cm</h2>
<div class="c">Ini adalah paragraf dengan tinggi baris yang ditentukan.<br>
Tinggi baris di sini disetel ke 0,5 sentimeter.</div>

<h2>line-height: 1cm</h2>
<div class="d">Ini adalah paragraf dengan tinggi baris yang ditentukan.<br>
Tinggi baris di sini diatur ke 1 sentimeter.</div>

</body></html>

Jalankan Contoh

Contoh

Menetapkan tinggi baris sebagai angka untuk elemen <div> :

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
  line-height: 0.5;
}

div.b {
  line-height: 1.6;
}

div.c {
  line-height: 2;
}
</style>
</head>
<body>

<h1>Properti line-height</h1>

<p>Di sini kita mengatur tinggi baris ke angka. Angka tersebut akan dikalikan dengan ukuran font saat ini untuk mengatur tinggi baris.</p>

<h2>line-height: : 0,5</h2>
<div class="a">Ini adalah paragraf dengan tinggi baris yang ditentukan.<br>
Tinggi baris di sini disetel ke 0,5.</div>

<h2>line-height: : 1.6</h2>
<div class="b">Ini adalah paragraf dengan tinggi baris yang disarankan.<br>
Tinggi baris di sini disetel ke 1,6.</div>

<h2>line-height: : 2</h2>
<div class="c">Ini adalah paragraf dengan tinggi baris yang ditentukan.<br>
Tinggi baris di sini diatur ke 2.</div>

</body></html>

Jalankan Contoh

Properti CSS text-indent

Contoh

Menetapkan indent tulisan pada baris pertama dengan nilai yang berbeda:

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
  text-indent: 50px;
}

div.b {
  text-indent: -2em;
}

div.c {
  text-indent: 30%;
}
</style>
</head>
<body>

<h1>Properti text-indent</h1>

<h2>text-indent: 50px</h2>
<div class= "a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

<h2>text-indent: -2em</h2>
<div class= "b">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

<h2>text-indent: 30%</h2>
<div class= "c">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti text-indent menentukan indent tulisan pada baris pertama didalam blok.

Catatan: Nilai negatif diperbolehkan. Baris pertama akan lebih ke kiri jika nilainya negatif.

Properti CSS white-space

Contoh

Menetapkan dengan nilai yang berbeda dari properti white-space :

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

p.b {
  white-space: normal;
}

p.c {
  white-space: pre;
}
</style>
</head>
<body>

<h1>Properti white-space</h1>

<h2>white-space: nowrap</h2>
<p class="a">
Ini beberapa teks. Ini beberapa teks. Ini beberapa teks.
Ini beberapa teks. Ini beberapa teks. Ini beberapa teks.
Ini beberapa teks. Ini beberapa teks. Ini beberapa teks.
Ini beberapa teks. Ini beberapa teks. Ini beberapa teks.
</p>

<h2>white-space: normal</h2>
<p class="b">
Ini beberapa teks. Ini beberapa teks. Ini beberapa teks.
Ini beberapa teks. Ini beberapa teks. Ini beberapa teks.
Ini beberapa teks. Ini beberapa teks. Ini beberapa teks.
Ini beberapa teks. Ini beberapa teks. Ini beberapa teks.
</p>

<h2>white-space: pre</h2>
<p class="c">
Ini beberapa teks. Ini beberapa teks. Ini beberapa teks.
Ini beberapa teks. Ini beberapa teks. Ini beberapa teks.
Ini beberapa teks. Ini beberapa teks. Ini beberapa teks.
Ini beberapa teks. Ini beberapa teks. Ini beberapa teks.
</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti white-space dapat menentukan bagaimana spasi di dalam elemen tersebut ditangani.

Properti CSS word-spacing

Contoh

Menetapkan spasi antar kata pada elemen <p> harus berukuran 30 piksel:

<!DOCTYPE html>
<html>
<head>
<style>
p.a { 
  word-spacing: normal;
}

p.b { 
  word-spacing: 30px;
}

p.c { 
  word-spacing: 1cm;
}
</style>
</head>
<body>

<h1>Properti word-spacing</h1>

<h2>word-spacing: normal</h2>
<p class="a">Ini adalah beberapa teks. Ini beberapa teks.</p>

<h2>word-spacing: 30px</h2>
<p class="b">Ini adalah beberapa teks. Ini beberapa teks.</p>

<h2>word-spacing: 1cm</h2>
<p class="c">Ini adalah beberapa teks. Ini beberapa teks.</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti word-spacing dapat menambah atau mengurangi spasi di antara kata-kata.

Catatan: Nilai negatif diperbolehkan.

Tutorial sebelumnya : Mengubah Huruf Menjadi Besar, Kecil dan Kapital Dengan CSS
Tutorial setelahnya : Membuat Bayangan Pada Tulisan Dengan CSS
Semua Tutorial CSS : Tutorial CSS