Indentasi paragraf adalah pengaturan paragraf agar baris pertama menjorok ke dalam suatu paragraf. Indentasi banyak ditemukan pada laporan formal, dokumen resmi, dan media cetak dimana gaya pada paragraf baris pertama dibuat dengan indentasi sebanyak satu ruang tab. Hal ini bertujuan agar pembaca dapat membedakan di mana paragraf tersebut diawali dan diakhiri.
Indentasi banyak ditemukan pada media formal dalam bentuk cetak. Namun pada halaman web, gaya penataan indentasi tidak begitu banyak ditemukan. Biasanya gaya visual pada web adalah dengan memberikan spasi dan ruang agak kosong yang berada dibawah setiap paragraf. Yang bertujuan sebagai tanda awal paragraf dan akhir paragraf.
Pengaturan indentasi paragraf pada CSS dapat menggunakan property text-indent. Property ini akan menghasilkan jarak indentasi sesuai dengan nilai yang diberikan. Property text-indent bersifat mewariskan dan diwariskan (inheritance) dan berlaku pada elemen HTML inline block. Sifat tersebut akan membuat semua elemen block yang berada di dalamnya akan menerapkan indentasi yang sama dengan induknya.
Penulisan property text-indent :
text-indent: value | inherit;
Nilai pada value adalah besaran yang dapat digunakan untuk menetapkan indentasi paragraf. Satuannya dapat menggunakan px, pt, em, % dan lainnya. Sedangkan nilai inherit digunakan untuk menetapkan nilai berdasarkan nilai indentasi pada elemen induknya.
Sebagai contoh misalnya :
p {text-indent: 30px;}
p {text-indent: 2.5em;}
p {text-indent: 40%;}
Berikut contoh indentasi dengan nilai indent sebesar 40px :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
<style>
p{
text-indent:40px;
padding:7px;
color:teal;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur. Nullam tempus orci sed est dictum semper. Praesent lacinia nec massa quis gravida. Aliquam ultrices neque non nunc auctor, et elementum libero porttitor. Nunc eu lacinia ex. Nam molestie vehicula sapien, vitae condimentum turpis maximus nec. Fusce eu accumsan metus. Aliquam blandit varius interdum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur. Nullam tempus orci sed est dictum semper. Praesent lacinia nec massa quis gravida. Aliquam ultrices neque non nunc auctor, et elementum libero porttitor. Nunc eu lacinia ex. Nam molestie vehicula sapien, vitae condimentum turpis maximus nec. Fusce eu accumsan metus. Aliquam blandit varius interdum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur. Nullam tempus orci sed est dictum semper. Praesent lacinia nec massa quis gravida. Aliquam ultrices neque non nunc auctor, et elementum libero porttitor. Nunc eu lacinia ex. Nam molestie vehicula sapien, vitae condimentum turpis maximus nec. Fusce eu accumsan metus. Aliquam blandit varius interdum.</p>
</body>
</html>
Anda dapat menggunakan indentasi dengan variasi nilai yang berbeda. Pemberian nilai negatif akan menghasilkan baris pertama paragraf berada luar margin elemen. Nilai persentase akan menghasilkan tampilan dengan indentasi berdasarkan persentase posisi teks pertama terhadap posisi lebar elemen.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
<style>
p{
padding:7px;
color:teal;
border: solid 1px magenta;
}
</style>
</head>
<body>
<p style="text-indent:40px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur. Nullam tempus orci sed est dictum semper. Praesent lacinia nec massa quis gravida. Aliquam ultrices neque non nunc auctor, et elementum libero porttitor. Nunc eu lacinia ex. Nam molestie vehicula sapien, vitae condimentum turpis maximus nec. Fusce eu accumsan metus. Aliquam blandit varius interdum.</p>
<p style="text-indent:-40px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur. Nullam tempus orci sed est dictum semper. Praesent lacinia nec massa quis gravida. Aliquam ultrices neque non nunc auctor, et elementum libero porttitor. Nunc eu lacinia ex. Nam molestie vehicula sapien, vitae condimentum turpis maximus nec. Fusce eu accumsan metus. Aliquam blandit varius interdum.</p>
<p style="text-indent:2em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur. Nullam tempus orci sed est dictum semper. Praesent lacinia nec massa quis gravida. Aliquam ultrices neque non nunc auctor, et elementum libero porttitor. Nunc eu lacinia ex. Nam molestie vehicula sapien, vitae condimentum turpis maximus nec. Fusce eu accumsan metus. Aliquam blandit varius interdum.</p>
<p style="text-indent:50%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur. Nullam tempus orci sed est dictum semper. Praesent lacinia nec massa quis gravida. Aliquam ultrices neque non nunc auctor, et elementum libero porttitor. Nunc eu lacinia ex. Nam molestie vehicula sapien, vitae condimentum turpis maximus nec. Fusce eu accumsan metus. Aliquam blandit varius interdum.</p>
<p style="text-indent:100%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur. Nullam tempus orci sed est dictum semper. Praesent lacinia nec massa quis gravida. Aliquam ultrices neque non nunc auctor, et elementum libero porttitor. Nunc eu lacinia ex. Nam molestie vehicula sapien, vitae condimentum turpis maximus nec. Fusce eu accumsan metus. Aliquam blandit varius interdum.</p>
</body>
</html>
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
