Dokumen ini adalah terjemahan dari CSS tips & tricks - CSS: indented paragraph dan mungkin terdapat kesalahan penerjemahan.

Dokumen aslinya dapat di temukan di: http://www.w3.org/Style/Examples/007/indent

Penerjemah: Edwin Rene

Web Style Sheets
CSS tips & tricks

(This page uses CSS style sheets)

Indentasi paragraf

Eiffel tower

Scale model of the Eiffel tower in Parc Mini-France

Berikut sesuatu yang sederhana: memasukkan baris pertama dari tiap paragraf. Banyak orang merasa hal tersebut lebih mudah dibaca ketimbang garis kosong diantara paragraf, terutama teks yang panjang, dan juga memungkinkan untuk menyediakan tempat kosong untuk pemisah (break) yang lebih berguna.

Trik disini adalah untuk hanya memberi indentasi pada paragraf yang mengikuti paragraf lain. Paragraf pertama dari sebuah halaman tidak membutuhkan indentasi, dan juga paragraf  setelah sebuah diagram, heading atau apapun yang merupakan offset dari teks tersebut. Aturannya sangatlah sederhana:

p {
margin-bottom: 0 }
p + p {
text-indent: 1.5em;
margin-top: 0 }

Aturan ini mengindentasi baris pertama dari paragraf yang mengikuti sebuah paragraf yang lain. Hal ini juga mengurangi spasi dibawah semua paragraf dan diatas paragraf yang di indentasi. Tetapi dalam prakteknya anda akan menemukan bahwa anda masih memerlukan beberapa pengecualian.

Dalam halaman ini misalnya, ada beberapa elemen P yang digunakan sebagai keterangan gambar (lihat contoh “Gambar & keterangan gambar” ). Kita sudah membuat posisinya menjadi tengah, dan oleh sebab itu tidak perlu di indentasi. Sebuah aturan sederhana 'p.caption {text-indent: 0}' akan mengatasi hal tersebut. Anda dapat melihat bahwa dalam contoh kita benar benar menggunakan aturan tersebut.

Sekarang kita dapat menggunakan berbagai jenis "whitespace" antara paragraf untuk mengindikasikan break yang penting dalam teks. Mari kita definisikan tiga kelas berbeda: stb (small thematic break), mtb (medium thematic break) dan ltb (large thematic break). Kita telah memberi paragraf ini sebuah kelas stb, jadi anda dapat melihat efeknya.

p.stb { text-indent: 0; margin-top: 0.83em }
p.mtb { text-indent: 0; margin-top: 2.17em }
p.ltb { text-indent: 0; margin-top: 3.08em }

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 17 Jan 2001;
last updated $Date: 2007/10/27 00:47:16 $ GMT