Nggawe spasi lan pemisahan fisik unsur ing HTML nganggo CSS
Nggawe spasi lan pemisahan fisik unsur-unsur ing HTML bisa angel dimangerteni kanggo perancang web awal. Iki amarga HTML nduweni sifat sing dikenal minangka "whitespace runtuh." apa sampeyan ngetik 1 spasi utawa 100 ing kode HTML, browser web kanthi otomatis nyusup spasi kasebut menyang mung siji spasi. Iki beda karo program kaya Microsoft Word , sing ngidini panyipta dokumen nambahake pirang-pirang spasi kanggo misahake tembung lan elemen liyane saka dokumen kasebut.
Iki ora kaya kerjane desain situs web.
Dadi, carane sampeyan nambah spasi putih ing HTML sing muncul ing kaca web ? Artikel iki nliti sawetara cara sing beda-beda.
Spasi ing HTML kanthi CSS
Cara sing dipilih kanggo nambah spasi ing HTML sampeyan yaiku nganggo Cascading Style Sheets (CSS) . CSS kudu digunakake kanggo nambah aspèk visual saka kaca web, lan wiwit spasi minangka bagéan saka ciri-ciri desain visual saka kaca, CSS ing ngendi sampeyan pengin iki rampung.
Ing CSS, sampeyan bisa nggunakake salah siji watesan utawa padding kanggo nambah spasi ing unsur. Kajaba iku, sifat indentasi teks nambah spasi ing ngarep teks, kayata kanggo indentasi paragraf.
Punika conto babagan carane nggunakake CSS kanggo nambah papan ing ngarep kabeh paragraf. Nambahake CSS ing ngisor iki kanggo sheet gaya njaba utawa internal :
p {
teks indent: 3em;
}
Spasi ing HTML: Nang Tèks Sampeyan
Yen sampeyan mung pengin nambah spasi tambahan utawa loro ing teks sampeyan, sampeyan bisa nggunakake spasi non-pecah.
Karakter iki tumindak kaya karakter spasi standar, mung ora ambruk ing browser.
Punika conto babagan cara nambah lima spasi ing sajrone baris teks:
Tèks iki nduwèni limang spasi ekstra ing njeroné
Migunakake HTML:
Tèks iki wis & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; limang spasi tambahan ing njero
Sampeyan uga bisa nggunakake tag
kanggo nambah ekstra baris ekstra.
Kalimat iki nduweni limang baris ing akhir iku.
Apa Spasi ing HTML Idea Bad
Nalika pilihan iki loro - elemen spasi sing ora bisa dipisah bakal nambah spasi menyang teks lan break baris bakal nambah spasi ing ngisor paragraf sing dituduhake ing ndhuwur - iki ora cara paling apik kanggo nggawe spasi ing kaca web sampeyan. Nambahake elemen kasebut menyang HTML nambahake informasi visual menyang kodhe tinimbang pamisahan struktur kaca (HTML) saka gaya visual (CSS). Praktik paling apik ndhikte menawa iki kudu kapisah kanggo sawetara alasan, kalebu nganyari nganyari ing mangsa lan sakabèhé ukuran berkas lan kinerja halaman.
Yen sampeyan nggunakake sheet gaya eksternal kanggo ngetrapake kabeh gaya lan jarak, banjur ganti gaya kasebut kanggo kabeh situs gampang dilakoni, amarga sampeyan mung kudu ngupayakake sawijining lembar gaya.
Coba conto ing ndhuwur kalimat kanthi tag limang ing weker. Yen sampeyan pengin jumlah spasi ing ngisor saben paragraf, sampeyan bakal perlu nambah kode HTML kanggo saben paragraf ing kabeh situs. Iku jumlah sing cukup markup ekstra sing bakal ngombe kaca sampeyan.
Kajaba iku, yen sampeyan nemtokake mudhun dalan sing ora bisa ditrapake utawa kurang, lan sampeyan pengin ngganti, sampeyan kudu ngowahi saben paragraf ing kabeh situs web. Ora matur nuwun!
Tinimbang nambahake elemen spasi menyang kode sampeyan, gunakake CSS.
p {
padding-bottom: 20px;
}
Sing siji baris CSS bakal nambah spasi ing ngisor paragraf kaca. Yen sampeyan pengin ngowahi jarak kasebut ing mangsa ngarep, owahi baris siji iki (tinimbang kabeh kode situs sampeyan) lan apik!
Saiki, yen sampeyan butuh nambah spasi tunggal ing salah siji situs sampeyan, nggunakake label
utawa papan non-pecah siji ora mburi donya, nanging sampeyan kudu ati-ati.
Nggunakake opsi jarak jembar HTML iki bisa dadi lereng lunyu. Nalika siji utawa loro ora bisa ngrusak situs sampeyan, yen sampeyan terus ngliwati path kasebut, sampeyan bakal ngatonake masalah menyang kaca. Ing pungkasan, sampeyan luwih apik ngowahi kanggo CSS kanggo spasi HTML, lan kabeh kaca web kaca kabutuhan liyane.