Crearea de spații și separarea fizică a elementelor în HTML poate fi dificil de înțeles pentru designerul web de început. Asta pentru ca HTML are o proprietate cunoscută sub numele de „colapsul spațiului alb”. indiferent dacă introduceți 1 spațiu sau 100 în codul dvs. HTML, browserul web restrânge automat aceste spații până la un singur spațiu. Acest lucru este diferit de un program de genul Microsoft Word, care permite creatorilor de documente să adauge mai multe spații pentru a separa cuvinte și alte elemente ale documentului respectiv. Nu așa funcționează spațierea proiectării site-urilor web.
Deci, cum adăugați spații albe în HTML care apar pe pagina web pe care ați construit-o? Acest articol examinează câteva dintre diferitele moduri.
Spații în HTML cu CSS
Modul preferat de a adăuga spații în HTML este cu Foi de stil în cascadă (CSS). CSS ar trebui să fie utilizat pentru a adăuga orice aspecte vizuale ale unei pagini web și, deoarece spațiul face parte din caracteristicile de design vizual ale unei pagini, CSS este locul în care doriți să se facă acest lucru.
În CSS, puteți utiliza fie marginea, 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 alinierea paragrafelor.
Iată un exemplu despre cum să utilizați CSS pentru a adăuga spațiu în fața tuturor paragrafelor dvs. Adăugați următorul CSS la extern sau intern foaie de stil:
p {
text-indent: 3em;
}
Spații în HTML în interiorul textului dvs.
Dacă doriți doar să adăugați un spațiu suplimentar sau două la textul dvs., puteți utiliza spațiul care nu se rupe. Acest personaj acționează exact ca un spațiu standard, doar că nu se prăbușește în interiorul browserului.
Iată un exemplu despre cum să adăugați cinci spații în interiorul unei linii de text:
Acest text are cinci spații suplimentare în interiorul său
Folosește codul HTML:
Acest text are cinci spații suplimentare în interiorul său
De asemenea, puteți utiliza
eticheta pentru a adăuga pauze de linie suplimentare.
Această propoziție are cinci pauze de linie la sfârșitul acesteia
De ce spațiul în HTML este o idee greșită
În timp ce ambele opțiuni funcționează - elementul de spații care nu se întrerup vor adăuga într-adevăr spațiu textului și liniei pauzele vor adăuga spațiu sub paragraful de mai sus - acesta nu este cel mai bun mod de a crea spațiu în pagină web. Adăugarea acestor elemente la codul dvs. HTML adaugă informații vizuale la cod în loc să separe structura unei pagini (HTML) de stilurile vizuale (CSS). Cele mai bune practici impun ca acestea să fie separate din mai multe motive, inclusiv ușurința actualizării în viitor și dimensiunea generală a fișierului și performanța paginii.
Dacă utilizați o foaie de stil externă pentru a vă dicta toate stilurile și spațiul, atunci este ușor să modificați aceste stiluri pentru întregul site, deoarece trebuie pur și simplu 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 acestuia. Dacă doriți acea cantitate de spațiu în partea de jos a fiecărui paragraf, ar trebui să adăugați codul HTML respectiv la fiecare paragraf din întregul site. Aceasta este o cantitate echitabilă de markup suplimentar care vă va umfla paginile. În plus, dacă decideți că această distanță este prea mare sau prea mică și doriți să o modificați puțin, va trebui să editați fiecare paragraf din întregul site web. Nu, mulțumesc!
În loc să adăugați aceste elemente de spațiere în cod, utilizați CSS.
p {
fund de umplutură: 20 px;
}
Un singur rând de CSS ar adăuga spațiu sub paragrafele paginii dvs. Dacă ați dorit să schimbați spațiul în viitor, modificați această linie (în locul întregului cod al site-ului) ș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, utilizând un
eticheta sau un singur spațiu neîntrerupt nu este sfârșitul lumii, dar trebuie să fii atent. Utilizarea acestor opțiuni de spațiere HTML în linie poate fi o pantă alunecoasă. Deși unul sau doi nu vă pot afecta site-ul, dacă continuați pe acea cale, veți introduce probleme în paginile dvs. În cele din urmă, este mai bine să apelați la CSS pentru spațierea HTML și la toate celelalte nevoi vizuale ale paginii web.