Carane Indent Paragraf Dengan CSS

Nggunakake Properti Tekan-Inden lan Pilihan Sibling Sibling

Desain web apik asring babagan tipografi apik. Amarga akeh isi halaman web ditampilake minangka teks, bisa nampilake gaya sing dadi teks apik lan efektif minangka skill penting kanggo nduweni minangka perancang web. Sayange, kita ora duwe level kontrol tipografi sing padha sing online sing dicithak. Iki tegese manawa kita ora bisa nggunakake teks gaya kanthi gampang ing situs web kanthi cara sing padha supaya bisa ditindakake kanthi dicithak.

Siji gaya paragraf umum sing sampeyan kerep ndeleng ing cithakan (lan sing bisa gawe recreate online) yaiku ing ngendi baris pisanan saka paragraf kasebut diwenehi siji papan tab . Iki ngidini para nonton kanggo ndeleng endi paragraf siji lan liya liyane.

Sampeyan ora ndeleng gaya visual iki akeh ing kaca web amarga browser, kanthi gawan, paragraf tampilan kanthi spasi ing ngisor minangka cara kanggo nuduhake endi siji lan liyane wiwit, nanging yen sampeyan pengin gaya kaca duwe print- gaya indent inspirasi ing paragraf, sampeyan bisa nindakake kanthi nggunakake gaya gaya indent teks .

Sintaks kanggo properti iki prasaja. Ing ngisor iki kapacak ing ngisor iki carane sampeyan nambahake indentasi teks menyang kabeh paragraf ing sawijining dokumen.

p {text-indent: 2em; }

Menyesuaikan Inden

Siji cara sampeyan bisa nemtokake persis paragraf menyang indent, sampeyan bisa nambah kelas menyang paragraf sing pengin dienggo, nanging sing mbutuhake sampeyan ngowahi saben paragraf kanggo nambah kelas kasebut. Sing ora efisien lan ora ngetutake praktik paling apik HTML .

Nanging, sampeyan kudu nimbang nalika sampeyan ngelingake paragraf. Sampeyan paragraf paragraf sing langsung melu paragraf liyane. Kanggo nindakake iki, sampeyan bisa nggunakake selector adhedhasar jejer. Kanthi pamilih iki, sampeyan milih saben paragraf sing langsung didhisiki dening paragraf liyane.

p + p {text-indent: 2em; }

Awit sampeyan nemokake baris pisanan, sampeyan uga kudu nggawe manawa paragraf sampeyan ora duwe papan ekstra ing antarane (sing minangka default browser). Secara gaya, sampeyan kudu duwe spasi antarane paragraf utawa indent baris pisanan, nanging ora loro.

p {margin-bottom: 0; padding-bottom: 0; } p + p {margin-top: 0; padding-top: 0; }

Indent negatif

Sampeyan uga bisa nggunakake properti indentasi teks , bebarengan karo nilai negatif, kanggo nyebabake wiwitan baris menyang sisih kiwa minangka lawan saka sisih tengen kaya inden normal. Sampeyan bisa nindakake iki yen baris diwiwiti kanthi tandha petik supaya karakter pethek muncul ing pinggir tipis ing sisih kiwa saka paragraf lan huruf-huruf kasebut isih dadi alur kiwa sing becik.

Contone, umpamane, sampeyan duwe paragraf sing keturunan blockquote lan sampeyan pengin ngindentifikasikake negosiasi. Sampeyan bisa nulis CSS iki:

blockquote p {text-indent: -.5em; }

Iki bakal menehi wiwitan saka paragraf, kang kalebu karakter pambuka, supaya rada dipindhah menyang ngiwa kanggo nggawe bantalan hanging.

Regane Margins lan Padding

Kadhangkala ing desain web, sampeyan nggunakake wates utawa padding nilai kanggo mindhah unsur lan nggawe papan putih. Nanging, situs kasebut ora bakal bisa kanggo ngasilake efek paragraf kasebut. Yen sampeyan nggunakake salah siji saka angka kasebut ing paragraf, kabeh teks paragraf kasebut, kalebu saben baris, bakal diwenehi jarak tinimbang mung baris pisanan.