Způsob, jakým prohlížeče zpracovávají mezeru, není zpočátku příliš intuitivní, zvláště pokud porovnáte, jak Hypertext Markup Language zpracovává mezeru ve srovnání s programy pro zpracování textu. V textovém editoru můžete do dokumentu přidat velké mezery nebo tabulátory a tyto mezery se projeví při zobrazení obsahu dokumentu. Tento design WYSIWYG neplatí pro HTML ani pro webové stránky.
Mezery v tisku
V softwaru pro zpracování textu jsou tři primární prázdné znaky znaky prostor, záložka, a návrat vozíku. Každá z těchto postav funguje odlišným způsobem, ale v prohlížeči HTML je všechny vykreslují v podstatě stejně. Ať už do svého prostoru umístíte jedno místo nebo 100 polí Značky HTML nebo smíchejte mezery s kartami a návraty vozíku, všechny tyto údaje budou zhuštěny na jedno místo, když bude stránka vykreslena prohlížeč. V terminologii webdesignu je toto známé jako zhroucení bílého prostoru. Tyto typické mezerníky nemůžete použít k přidání mezer na webovou stránku, protože prohlížeč při vykreslení v prohlížeči sbalí opakované mezery pouze do jednoho prostoru,
Vytváření záložek HTML a mezer pomocí CSS
Webové stránky jsou dnes vytvářeny s oddělením struktury a stylu. Struktura stránky je zpracována HTML, zatímco styl je diktován kaskádovými styly. Chcete-li vytvořit mezery nebo dosáhnout určitého rozvržení, místo přidání mezerových znaků do kódu HTML se obraťte na CSS.
Pokud se snažíte použít záložky k vytvoření sloupců textu použijte místo toho
Pokud data, která rozkládáte, jsou tabulková data, použijte tabulky k zarovnání těchto dat, jak chcete. Tabulky často dostávají špatný rap ve webovém designu, protože byly tolik let zneužívány jako čisté nástroje pro rozložení, ale tabulky jsou stále dokonale platné, pokud váš obsah obsahuje skutečně tabulková data.
Okraje, odsazení a odsazení textu
Nejběžnějším způsobem, jak vytvořit mezery pomocí CSS, je použití jednoho z následujících stylů CSS:
- okraj
- polstrování
- odsazení textu
Například odsaďte první řádek odstavce jako tabulátor s následujícím CSS (všimněte si, že to předpokládá, že váš odstavec má k sobě připojený atribut třídy „první“):
p. první {
odsazení textu: 5em;
}
Tento odstavec odsazuje asi pět znaků.
Použijte vlastnosti okraje nebo odsazení v CSS pro přidání mezer na horní, dolní, levý nebo pravý (nebo kombinace těchto stran) prvku. Získejte jakýkoli potřebný rozestup pomocí přechodu na CSS.
Přesouvání textu na více než jeden prostor bez CSS
Pokud vše, co chcete, je, aby byl váš text přesunut o více než jedno místo od předchozí položky, použijte neporušený prostor.
Chcete-li použít nerozbitný prostor, přidáte tolikrát, kolik potřebujete ve svých značkách HTML.
HTML tyto neporušitelné mezery respektuje a nesbalí je do jediného prostoru. Tento přístup je však považován za špatnou praxi, protože přidává další značky HTML do dokumentu pouze za účelem dosažení potřeb rozložení. Pokud je to možné, jednoduše nepřidávejte nerozbité mezery, abyste dosáhli požadovaného efektu rozložení a použití Okraje a polstrování CSS namísto.