Vytváření mezer a fyzické oddělení prvků v HTML může být pro začínajícího webového designéra obtížné pochopit. To je proto, že HTML má vlastnost známou jako „kolaps mezer.“ bez ohledu na to, zda do kódu HTML zadáte 1 mezeru nebo 100, webový prohlížeč tyto mezery automaticky sbalí na jediné místo. To se liší od podobného programu Microsoft Word, což umožňuje tvůrcům dokumentů přidat více mezer k oddělení slov a dalších prvků tohoto dokumentu. Takto mezery v designu webových stránek nefungují.
Jak tedy přidáte mezery v HTML, které se zobrazí na webovou stránku, kterou jste vytvořili? Tento článek zkoumá některé z různých způsobů.
Prostory v HTML s CSS
Upřednostňovaným způsobem přidání mezer do kódu HTML je Kaskádové styly (CSS). CSS by měl být použit k přidání jakýchkoli vizuálních aspektů webové stránky, a protože mezery jsou součástí charakteristik vizuálního designu stránky, CSS je místo, kde to chcete provést.
V CSS můžete k přidání prostoru kolem prvků použít vlastnosti okraje nebo výplně. Vlastnost odsazení textu navíc přidá prostor k přední části textu, například pro odsazení odstavců.
Zde je příklad toho, jak pomocí CSS přidat prostor před všechny odstavce. Přidejte do svého souboru CSS následující externí nebo vnitřní šablona stylů:
p {
odsazení textu: 3em;
}
Mezery v HTML uvnitř vašeho textu
Pokud chcete do svého textu přidat další dvě mezery, můžete použít neporušenou mezeru. Tento znak funguje stejně jako standardní znak mezery, pouze se nesbalí uvnitř prohlížeče.
Zde je příklad, jak přidat pět mezer do řádku textu:
Tento text má uvnitř pět mezer navíc
Používá HTML:
Tento text má uvnitř pět mezer navíc
Můžete také použít
tag pro přidání dalších konců řádků.
Tato věta má na konci pět zalomení řádků
Proč je mezery v HTML špatný nápad
I když tyto možnosti fungují - prvek nerozbitných mezer skutečně přidá mezery do vašeho textu a řádku přestávky přidají mezery pod výše uvedený odstavec - to není nejlepší způsob, jak vytvořit mezery ve vašem souboru webová stránka. Přidáním těchto prvků do kódu HTML přidáte do kódu vizuální informace namísto oddělení struktury stránky (HTML) od vizuálních stylů (CSS). Osvědčené postupy diktují, že by měly být oddělené z mnoha důvodů, včetně snadné aktualizace v budoucnu a celkové velikosti souboru a výkon stránky.
Pokud k diktování všech svých stylů a mezer použijete externí šablonu stylů, je snadné tyto styly změnit pro celý web, protože jednoduše musíte jednu šablonu stylů aktualizovat.
Zvažte výše uvedený příklad věty s pěti
značky na konci. Pokud byste chtěli takové množství mezer v dolní části každého odstavce, budete muset přidat tento HTML kód do každého odstavce na celém vašem webu. To je slušné množství dalších značek, které vaše stránky nafouknou. Pokud se navíc rozhodnete, že tato mezera je příliš velká nebo příliš malá a chcete ji trochu změnit, budete muset upravit každý odstavec na celém svém webu. Ne, děkuji!
Místo přidání těchto mezer do kódu použijte CSS.
p {
polstrované dno: 20px;
}
Ten jeden řádek CSS by přidal mezery pod odstavci vaší stránky. Pokud byste chtěli v budoucnu toto mezery změnit, upravte tento jeden řádek (místo kódu celého webu) a můžete vyrazit!
Nyní, pokud potřebujete přidat jeden prostor do jedné části vašeho webu, použijte a
značka nebo jediný nerozbitný prostor není konec světa, ale musíte být opatrní. Pomocí těchto možností vložení mezer mezi HTML může být kluzký sklon. I když jeden nebo dva nemusí vašemu webu ublížit, pokud budete pokračovat touto cestou, způsobíte svým stránkám problémy. Nakonec je lepší přejít na CSS pro řádkování HTML a všechny ostatní vizuální potřeby webových stránek.