Skep spasies en fisiese skeiding van elemente in HTML met CSS
Die skep van spasies en fisiese skeiding van elemente in HTML kan moeilik wees om vir die begin webontwerper te verstaan. Dit is omdat HTML 'n eiendom het wat bekend staan as 'witruim ineenstorting'. of jy nou 1 spasie of 100 in jou HTML-kode tik, verswak die webblaaier daardie spasies outomaties tot net een enkele spasie. Dit verskil van 'n program soos Microsoft Word , waarmee dokument skeppers verskeie spasies kan byvoeg om woorde en ander elemente van die dokument te skei.
Dit is nie hoe webruimte ontwerpspasiëring werk nie.
So, hoe voeg jy witspasies in HTML wat op die webblad verskyn ? Hierdie artikel ondersoek sommige van die verskillende maniere.
Spasies in HTML met CSS
Die voorkeur manier om spasies in jou HTML te voeg, is met Cascading Style Sheets (CSS) . CSS moet gebruik word om enige visuele aspekte van 'n webblad by te voeg, en aangesien die spasiëring deel is van die visuele ontwerp eienskappe van 'n bladsy, is CSS waar u dit wil doen.
In CSS kan u die marge of padding eienskappe gebruik om ruimte rondom elemente te voeg. Daarbenewens voeg die teks-inheemse eiendom ruimte aan die voorkant van die teks, soos vir die inspringing van paragrawe.
Hier is 'n voorbeeld van hoe om CSS te gebruik om ruimte voor al u paragrawe by te voeg. Voeg die volgende CSS by jou eksterne of interne stylblad:
p {
teks-indent: 3em;
}
Spasies in HTML: Binne jou teks
As jy net 'n addisionele spasie of twee by jou teks wil voeg, kan jy die nie-brekende spasie gebruik.
Hierdie karakter tree net soos 'n standaardruimtekarakter op, maar dit val nie binne-in die blaaier nie.
Hier is 'n voorbeeld van hoe om vyf spasies in 'n tekslyn te voeg:
Hierdie teks het vyf ekstra spasies daarin
Gebruik die HTML:
Hierdie teks het & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Vyf ekstra spasies daarin
Jy kan ook die
tag gebruik om ekstra lynpouses by te voeg.
Hierdie sin het vyf reëlpaaie aan die einde daarvan
Waarom ruimte in HTML is 'n slegte idee
Alhoewel hierdie opsies albei werk, sal die spasie wat nie breek nie spasieë op jou teks voeg nie en die lynstrokies sal spasiëring onder die bostaande paragraaf voeg. Dit is nie die beste manier om spasie in jou webblad te skep nie. Deur hierdie elemente by jou HTML te voeg, voeg visuele inligting by die kode in plaas van die struktuur van 'n bladsy (HTML) van die visuele style (CSS) te skei. Beste praktyke dikteer dat dit vir 'n aantal redes afsonderlik moet wees, insluitende die gemak van opdatering in die toekoms en algehele lêergrootte en bladsyprestasie.
As jy 'n eksterne stylblad gebruik om al jou style en spasiëring te dikteer, is dit maklik om die style vir die hele webwerf te verander, aangesien jy net daardie een stylvel moet bywerk.
Oorweeg die voorbeeld hierbo van die sin met vyf
tags aan die einde daarvan. As jy die hoeveelheid spasiëring onderaan elke paragraaf wou hê, moet jy daardie HTML-kode by elke paragraaf in jou hele webwerf voeg. Dit is 'n goeie hoeveelheid ekstra opmaak wat jou bladsye sal opblaas.
As jy verder besluit dat hierdie spasiëring te veel of te min is, en jy wil dit effens verander, moet jy elke paragraaf op jou hele webwerf wysig. Nee dankie!
In plaas daarvan om hierdie spasieelemente by jou kode te voeg, gebruik CSS.
p {
opvulling-bodem: 20px;
}
Daardie een lyn van CSS sal spasiëring voeg onder jou bladsy se paragrawe. As jy die spasiëring in die toekoms wil verander, wysig hierdie een reël (in plaas van jou hele webwerf se kode) en jy is goed om te gaan!
Nou, as jy 'n enkele spasie in een deel van jou webwerf wil byvoeg, gebruik 'n
-tag of 'n enkele nie-brekende spasie nie die einde van die wêreld nie, maar jy moet versigtig wees.
Die gebruik van hierdie inline HTML spasiëring opsies kan 'n gladde helling wees. Terwyl een of twee dalk nie jou werf beseer nie, sal jy probleme ondervind in jou bladsye as jy verder gaan. Uiteindelik is u beter om te skakel na CSS vir HTML-spasiëring, en alle ander webblad se visuele behoeftes.