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
(This page uses CSS style sheets)
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 }