Vytvořte kartu HTML a mezery na webových stránkách pomocí CSS

The best protection against click fraud.

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,

instagram viewer

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

prvky, které jsou umístěny pomocí CSS, aby se dosáhlo tohoto rozložení sloupce. Toto umístění lze provést pomocí plováků CSS, absolutního a relativního umístění nebo novějších technik rozložení CSS, jako je Flexbox nebo CSS Grid.

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.

instagram story viewer