Modul în care browserele au gestionat spațiul alb nu este foarte intuitiv la început, mai ales dacă comparați modul în care Hypertext Markup Language gestionează spațiul alb în raport cu programele de procesare a textului. În software-ul de procesare a textului, puteți adăuga o mulțime de spațiu sau file în document și această spațiere se va reflecta în afișarea conținutului documentului. Acest design WYSIWYG nu este cazul HTML sau al paginilor web.
Spațiere în tipărire
În software-ul de procesare a textului, cele trei caractere principale în spațiu alb sunt spaţiu, filă, și retur transport. Fiecare dintre aceste caractere acționează într-un mod distinct, dar în HTML, browserele le transformă pe toate în esență la fel. Indiferent dacă plasați un spațiu sau 100 de spații în Marcare HTML sau amestecați spațiul cu filele și retururile de carucior, toate acestea vor fi condensate până la un spațiu când pagina este redată de browser. În terminologia de proiectare web, aceasta este cunoscută sub numele de
colapsul spațiului alb. Nu puteți utiliza aceste taste tipice de spațiere pentru a adăuga spații albe într-o pagină web, deoarece browserul colapsează spațiile repetate într-un singur spațiu atunci când este redat în browser,Utilizarea CSS pentru a crea file HTML și spațiu
Site-urile web de astăzi sunt construite cu o separare de structură și stil. Structura unei pagini este gestionată de HTML, în timp ce stilul este dictat de Foi de stil în cascadă. Pentru a crea spațiere sau pentru a obține un anumit aspect, treceți la CSS în loc să adăugați caractere de spațiere la codul HTML.
Dacă încercați să utilizați filele pentru a crea coloane de text, utilizați în schimb
Dacă datele pe care le prezentați sunt date tabulare, utilizați tabele pentru a alinia aceste date așa cum doriți. Tabelele obțin adesea un rap rău în designul web, deoarece au fost abuzate ca instrumente de aspect pur timp de atâția ani, dar tabelele sunt încă perfect valabile dacă conținutul dvs. conține date cu adevărat tabulare.
Margini, căptușeală și indentare text
Cele mai frecvente moduri de a crea spațierea cu CSS este prin utilizarea unuia dintre următoarele stiluri CSS:
- marjă
- căptușeală
- text-indent
De exemplu, indentați prima linie a unui paragraf ca o filă cu următorul CSS (rețineți că acest lucru presupune că paragraful dvs. are un atribut de clasă „primul” atașat):
p.first {
text-indent: 5em;
}
Acest paragraf indentează aproximativ cinci caractere.
Folosiți marginea sau proprietățile de umplere în CSS pentru a adăuga spațierea în partea de sus, de jos, la stânga sau la dreapta (sau combinații ale acelor fețe) ale unui element. Obțineți orice fel de spațiu necesar, apelând la CSS.
Mutarea textului mai mult de un spațiu fără CSS
Dacă tot ce doriți este ca textul dvs. să fie mutat la mai mult de un spațiu departe de elementul precedent, utilizați spațiul care nu se rupe.
Pentru a utiliza spațiul care nu se rupe, adăugați de câte ori ai nevoie în marcajul HTML.
HTML respectă aceste spații neîntrerupte și nu le va restrânge într-un singur spațiu. Cu toate acestea, această abordare este considerată o practică slabă, deoarece adaugă un marcaj HTML suplimentar unui document numai pentru a atinge nevoile de aspect. Când este posibil, evitați adăugarea de spații care nu se rupe pur și simplu pentru a obține efectul și utilizarea dorite de aspect Marjele CSS și căptușeala in schimb.