Cara Gunakake HTML lan CSS kanggo Nggawe Tab lan Spasi

Delengen carane papan putih ing HTML dianggep dening browser

Yen sampeyan dadi perancang web wiwitan, salah siji saka akeh perkara sing kudu sampeyan mangerteni ing awal yaiku cara papan putih ing kode situs ditangani dening browser web.

Sayange, cara browser nangani spasi putih ora intuisi ing wiwitan, luwih-luwih yen sampeyan teka ing HTML lan mbandhingake carane papan putih ditangani ing program pangolah tembung, sing uga luwih dikenal.

Ing piranti lunak pangolahan, sampeyan bisa nambah akeh spasi utawa tab ing dokumen lan spasi bakal dibayangke ing tampilan isi document. Iki ora kaya kasus HTML utawa karo kaca web. Dadi, ngerti carane papan putih, tenan, ditangani dening browser web iku penting banget.

Spasi ing Print

Ing piranti lunak pangolahan, telung karakter spasi putih utama yaiku spasi, tab, lan carriage bali. Saben uwong iki tumindak kanthi cara sing beda, nanging ing HTML, browser nglayani kabeh sing padha. Nganggo papan utawa 100 spasi ing markup HTML, utawa nyampur spasi kanthi tab lan bali, kabeh bakal dikurangi dadi siji spasi nalika kaca kasebut dikirim dening browser. Ing terminologi desain web, iki dikenal minangka ruang putih ambruk. Sampeyan ora bisa nggunakake tombol spasi khas iki kanggo nambah papan spasi ing kaca web amarga browser ambruk kaping spasi nganti dadi mung siji spasi nalika direkrutake ing browser,

Kena Apa Wong Gunakake Tab?

Biasane, nalika wong nganggo tab ing sawijining dokumen teks, dheweke digunakake kanggo alasan tata letak utawa supaya teks bisa pindhah menyang panggonan tartamtu utawa dadi jarak tartamtu saka unsur liya. Ing desain web, sampeyan ora bisa migunakake karakter spasi kasebut kanggo entuk gaya visual utawa kabutuhan tata letak kasebut.

Ing desain web, penggunaan karakter spasi ekstra ing kode kasebut bakal murni kanggo gampang maca kode kasebut. Desainer lan pengembang Web kerep nggunakake tab kanggo kode indent supaya padha bisa ndeleng unsur kasebut minangka unsur unsur liya - nanging indentasi kasebut ora ndadekake tata letak visual saka situs kasebut dhewe. Kanggo sing owah-owahan tata letak visual sing dibutuhake, sampeyan kudu nguripake CSS (nggoleki gaya lembaran).

Nggunakake CSS kanggo Nggawe Tab HTML lan Spasi

Situs web saiki dibangun kanthi pepisahan struktur lan gaya. Struktur sawijining kaca ditangani dening HTML nalika gaya didikte dening CSS. Iki tegese nggawe spasi utawa entuk tata letak tartamtu, sampeyan kudu ngowahi menyang CSS lan ora nyoba nambah karakter spasi kanggo kode HTML.

Yen sampeyan nyoba nggunakake tab kanggo nggawe kolom teks, sampeyan bisa tinimbang nggunakake

unsur sing diposisikan karo CSS kanggo njaluk tata letak kolom kasebut. Posisi iki bisa dilakoni liwat CSS floats, posisi absolut lan relatif, utawa teknik tata letak CSS luwih kaya Flexbox utawa CSS Grid.

Yen data sing sampeyan metu iku data tabular, sampeyan bisa nggunakake tabel kanggo nyelarasake data sing kaya. Tabel kerep njaluk rap ala ing desain web amarga disalahake minangka alat tata letak murni kanggo pirang-pirang taun, nanging tabel isih sah yen isi sampeyan ngemot data tabular kasebut.

Margin, Padding, and Text-Indent

Cara paling umum kanggo nggawe spasi karo CSS yaiku kanthi nggunakake salah sawijining gaya CSS ing ngisor iki:

Contone, sampeyan bisa ngemot baris pisanan paragraf kaya tab kanthi CSS ing ngisor iki (catheten yen iki nganggep paragraf sampeyan duwe atribut kelas "pisanan" sing digandhengake):

p.first {
teks indent: 5em;
}

Paragraf saiki bakal diwenehi kira-kira 5 karakter.

Sampeyan uga bisa nggunakake wates utawa padding properti ing CSS kanggo nambah jarak menyang ndhuwur, ngisor, kiwa, utawa tengen (utawa kombinasi saka sisi) sawijining elemen. Wekasane, sampeyan bisa entuk sembarang spasi sing dibutuhake kanthi ngowahi kanggo CSS.

Ngalih Teks Luwih saka Space Tanpa CSS

Yen kabeh sing dikarepake kanggo teks sampeyan bakal dipindhahake luwih saka siji spasi adoh saka item sadurunge, sampeyan bisa nggunakake spasi non-pecah.

Kanggo nggunakake spasi sing ora pecah, sampeyan mung nambah & nbsp; kaya kaping pirang-pirang sing sampeyan butuhake ing markup HTML.

Contone, yen sampeyan pengin mindhah tembung limang spasi liwat, sampeyan bisa nambah ing ngisor iki sadurunge tembung.

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp;

HTML ngajeni iki lan ora bakal ambruk mudhun menyang papan siji. Nanging, iki dianggep minangka praktik sing paling miskin amarga nambah markup HTML kanggo dokumen mung kanggo ngrampungake kabutuhan layout. Menehi referensi kanggo pemisahan struktur lan gaya, sampeyan kudu ngidini nambah spasi sing ora bisa dipisahake mung kanggo ngrampungake efek tata letak sing dikepengini lan kudu nggunakake jaba cetak lan padding CSS.