Spôsob, akým prehliadače narábajú s bielym priestorom, nie je spočiatku príliš intuitívny, najmä ak porovnáte, ako jazyk Hypertext Markup Language pracuje s bielym priestorom v porovnaní s programami na spracovanie textu. V softvéri na spracovanie textu môžete do dokumentu pridať veľké medzery alebo tabulátory a tieto medzery sa prejavia pri zobrazení obsahu dokumentu. Tento dizajn WYSIWYG neplatí pre HTML alebo pre webové stránky.
Medzery v tlači
V softvéri na spracovanie textu sú tri primárne prázdne znaky: priestor, taba návrat vozíka. Každá z týchto postáv koná odlišným spôsobom, ale v prehliadači HTML ich všetky vykresľujú v podstate rovnako. Či už do svojho priestoru umiestnite jeden priestor alebo 100 medzier Označenie HTML alebo zmiešajte svoje medzery s tabulátormi a návratmi vozíka, všetky sa skondenzujú na jednu medzeru, keď stránku vykreslí prehliadač. V terminológii webového dizajnu je to známe ako zrútenie bieleho priestoru. Tieto typické kľúče na medzery nemôžete použiť na pridanie medzier na webovú stránku, pretože prehľadávač pri vykreslení v prehliadači zbalí opakované medzery iba na jeden priestor,
Používanie CSS na vytváranie kariet HTML a medzery
Dnešné webové stránky sú postavené na oddelení štruktúry a štýlu. Štruktúru stránky spracováva HTML, zatiaľ čo štýl je diktovaný kaskádovými štýlmi. Ak chcete vytvoriť medzery alebo dosiahnuť určité rozloženie, namiesto pridania medzier do kódu HTML sa obráťte na CSS.
Ak sa snažíte použiť záložky na vytvorenie stĺpcov textu použite
Ak sú vami rozložené údaje tabuľkové údaje, použite tabuľky na ich zarovnanie podľa svojich predstáv. Tabuľky majú často zlý vplyv na webdizajn, pretože sa toľko rokov zneužívali ako čisté nástroje na rozloženie, ale tabuľky sú stále úplne platné, ak váš obsah obsahuje skutočne tabuľkové údaje.
Okraje, výplň a odsadenie textu
Najbežnejšie spôsoby vytvárania medzier pomocou CSS sú použitie jedného z nasledujúcich štýlov CSS:
- rozpätie
- vypchávka
- zarážka textu
Napríklad odsadiť prvý riadok odseku ako tabulátor s nasledujúcim CSS (všimnite si, že sa predpokladá, že váš odsek má k sebe pripojený atribút triedy „prvý“):
p.prvý {
zarážka textu: 5em;
}
Tento odsek zaráža asi päť znakov.
Použite vlastnosti okraja alebo výplne v CSS ak chcete pridať medzery na hornú, dolnú, ľavú alebo pravú stranu (alebo kombináciu týchto strán) prvku. Prejdite na CSS a dosiahnite všetky potrebné medzery.
Presúvanie textu na viac ako jedno miesto bez CSS
Ak chcete, aby bol váš text presunutý o viac ako jednu medzeru od predchádzajúcej položky, použite nezlomiteľnú medzeru.
Ak chcete využiť neprelomiteľný priestor, pridáte koľkokrát to potrebujete v označení HTML.
HTML rešpektuje tieto nerozlomiteľné medzery a nezbalí ich do jedného priestoru. Tento prístup sa však považuje za zlý postup, pretože pridáva ďalšie značky HTML do dokumentu iba na účely dosiahnutia rozloženia. Ak je to možné, jednoducho nepridávajte neporušené medzery, aby ste dosiahli požadovaný efekt rozloženia a použitie Okraje a polstrovanie CSS namiesto toho.