Mengatur jarak spasi antar Text

CSS juga dapat di gunakan untuk mengatur spasi antar text, perhatikan contoh berikut :

Pada judul heading terlihat bahwa antar kata dan huruf terdapat jarak tertentu. Jarak tersebut diatur dengan menggunakan properti sbb:
word-spacing : jarak;
letter-spacing : jarak;

Properti pertama di atas digunakan untuk mengatur jarak antar kata, sedangkan yang kedua untuk mengatur jarak antar huruf.
Sebagai contoh, berikut ini code yang menghasilkan tampilan di atas.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS Guide</title> 
<style type="text/css">
h1 { 
 word-spacing: 20px; 
 letter-spacing: 15px; 
 } 
 
</style> 
</head> 
<body> 
<h1>Ini Judul Heading</h1> 
<p>Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 
Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 
Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 
Ini adalah paragraf 1. </p> 
<p>Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. 
Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. 
Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. 
Ini adalah paragraf 2. Ini adalah paragraf 2. </p> 
</body> 
</html>
Simpel bukan, selanjutnya kita akan pelajari tentang text indent.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Author:

Facebook Comment

Inside Post