Creați spații și separarea fizică a elementelor în HTML cu CSS
Crearea de spații și separarea fizică a elementelor în HTML poate fi dificil de înțeles pentru începătorul web designerului. Acest lucru se datorează faptului că HTML are o proprietate cunoscută sub numele de "colapsul spațiului alb". indiferent dacă tastați 1 spațiu sau 100 în codul dvs. HTML, browserul web colapsează automat aceste spații până la un singur spațiu. Acest lucru este diferit de un program precum Microsoft Word , care permite creatorilor de documente să adauge spații multiple pentru a separa cuvintele și alte elemente ale acelui document.
Acesta nu este modul în care funcționează spațiul de design al site-ului web.
Deci, cum adăugați spații libere în HTML care apar pe pagina web ? Acest articol examinează câteva moduri diferite.
Spații în HTML cu CSS
Modul preferat de a adăuga spații în HTML este cu foi de stil cascadă (CSS) . CSS ar trebui să fie utilizat pentru a adăuga orice aspect vizual al unei pagini Web și, deoarece spațierea face parte din caracteristicile vizuale ale unei pagini, CSS este locul în care doriți să faceți acest lucru.
În CSS, puteți utiliza fie proprietățile margini, fie proprietățile de umplere pentru a adăuga spațiu în jurul elementelor. În plus, proprietatea text-indent adaugă spațiu în partea din față a textului, cum ar fi pentru indentarea paragrafelor.
Iată un exemplu de utilizare a CSS pentru a adăuga spațiu în fața tuturor paragrafelor. Adăugați următorul CSS pe foaia dvs. de stil externă sau internă :
p {
text-liniuță: 3em;
}
Spații în HTML: În interiorul textului
Dacă doriți doar să adăugați un spațiu suplimentar sau două în textul dvs., puteți utiliza spațiul care nu se rupe.
Acest personaj acționează ca un caracter spațial standard, dar nu se prăbușește în interiorul browserului.
Iată un exemplu de adăugare a cinci spații într-o linie de text:
Acest text are cinci spații suplimentare în interiorul acestuia
Utilizează codul HTML:
Acest text are & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; cinci spații suplimentare înăuntru
De asemenea, puteți utiliza eticheta pentru a adăuga pauze suplimentare de linii.
Această teză are cinci rupturi de linie la sfârșitul acesteia
De ce spațiul în HTML este o idee proastă
În timp ce aceste opțiuni funcționează, elementul de spații care nu se rupe va adăuga într-adevăr spațiu spre textul dvs., iar rupturile liniei vor adăuga spațierea sub paragraful de mai sus - aceasta nu este cea mai bună modalitate de a crea spațierea în pagina dvs. web. Adăugarea acestor elemente în codul HTML adaugă informații vizuale la cod în loc să separe structura unei pagini (HTML) de stilurile vizuale (CSS). Cele mai bune practici dictează faptul că acestea ar trebui să fie separate pentru mai multe motive, inclusiv ușurința de actualizare în viitor și dimensiunea generală a fișierului și performanța paginii.
Dacă utilizați o foaie de stil externă pentru a dicta toate stilurile și spațiile dvs., atunci schimbarea acelor stiluri pentru întregul site este ușor de făcut, deoarece pur și simplu trebuie să actualizați acea foaie de stil.
Luați în considerare exemplul de mai sus al propoziției cu cinci etichete
la sfârșitul acesteia. Dacă v-ați dorit acea cantitate de spațiere în partea de jos a fiecărui paragraf, va trebui să adăugați codul HTML la fiecare paragraf din întregul site. Aceasta este o sumă corectă de marcare suplimentară care vă va umfla paginile.
În plus, dacă decideți că drumul este prea mare sau prea mic și doriți să îl modificați puțin, va trebui să modificați fiecare paragraf din întregul dvs. site. Nu, mulțumesc!
În loc să adăugați aceste elemente de spațiere în codul dvs., utilizați CSS.
p {
padding-bottom: 20px;
}
O singură linie de CSS ar adăuga spațierea sub paragrafele paginii tale. Dacă doriți să schimbați spațiul în viitor, modificați această linie (în loc de codul întregului dvs. site) și sunteți bine să mergeți!
Acum, dacă trebuie să adăugați un singur spațiu într-o parte a site-ului dvs. web, folosirea unei etichete
sau a unui singur spațiu care nu se rupe nu este sfârșitul lumii, dar trebuie să fiți atent.
Utilizarea acestor opțiuni de spațiu HTML inline poate fi o pantă alunecoasă. În timp ce una sau două nu pot răni site-ul dvs., dacă continuați această cale, veți introduce probleme în paginile dvs. În cele din urmă, este mai bine să vă întoarceți la CSS pentru spațierea HTML și toate celelalte nevoi vizuale ale paginii web.