Vytváří větší prostor v HTML na webové stránce může být dosaženo mnoha způsoby, v závislosti na typu prostoru, který chcete vytvořit. Následující části obsahují mnoho různých způsobů, jak vytvořit další prostor pomocí HTML i CSS.,
Vytváření extra mezery před nebo za text
Jeden z nejvíce matoucích věcí pro nové uživatele, kteří vytvářejí webové stránky, je, že nemohou stiskněte mezerník několikrát, aby další prostory. Chcete-li vytvořit další mezery před, po nebo mezi textem, použijte (non-breaking space) rozšířený znak HTML.
například s „extra space“ máme v našem HTML následující kód.,
extra space
Pokud používáte nějaký WYSIWYG editor pro zadání kódu výše, musíte být v záložce HTML nebo editaci HTML kódu.
pro seznam rozšířených speciálních znaků HTML Viz: úplný seznam rozšířených speciálních znaků HTML.
Mějte mezery v textu, který je vložen do stránky
Pokud vkládáte text s dodatečnými mezerami nebo tabulátory, můžete použít HTML <před> tag udržet text formátovaný., Níže je uveden příklad, jak vložit text s extra mezerami pomocí značky <pre>.
This text has lots of spaces
výše uvedený příklad se provádí pomocí níže uvedeného kódu HTML.
<pre class="tab">This text has lots of spaces</pre>
- Viz naše HTML <před> tag stránky pro další informace o tomto tagu.
Pokud používáte editor WYSIWYG pro zadání výše uvedeného kódu, musíte být na kartě HTML nebo upravit kód HTML.,
vytvoření dalšího prostoru kolem prvku nebo objektu
jakýkoli prvek HTML může mít další mezery přidané do horní, pravé,dolní nebo levé. Před rozhodnutím o typu prostoru, který chcete přidat kolem prvku nebo objektu, se však ujistěte, že rozumíte rozdílu mezi okrajem a polstrováním. Jak je vidět na obrázku níže, polstrování obklopuje prvek, uvnitř hranice a okraj mimo hranici.
níže uvedený příklad ukazuje náš odstavec obklopený okrajem, odsazený okrajem a roztečí vpravo a dole.,
příklad odstavce s okrajem a polstrováním.
výše uvedený příklad byl vytvořen pomocí níže uvedeného kódu.
V první části kodexu, „margin-left: 2.5 em;“ přidává levý okraj 2,5 em, který dává vzhled odsazený text. Jak ukazuje příklad, tento rozestup je mimo hranici. V další části“ polstrování: 0 7em 2em 0; “ je definování horní, pravé, dolní a levé (ve směru hodinových ručiček) polstrování. K dispozici je “ 0 „horní polstrování,“ 7em „pravé polstrování,“ 2em “ spodní polstrování a 0 levé polstrování., Zbytek tohoto příkladu definuje, jak by hranice měla vypadat.
vytvoření karty pomocí CSS a HTML
kartu lze vytvořit v HTML úpravou levého okraje prvku. Například tento odstavec má levý okraj 2,5 em od prvku obsahujícího text. CSS pro vytvoření tohoto levého okraje je uveden níže.
.tab { margin-left: 2.5em}
po vložení tohoto kódu do našeho souboru CSS můžeme použít třídu „tab“ na libovolný text, abychom vytvořili vzhled karty. Hodnota levého okraje může být zvýšena nebo snížena v závislosti na vašich potřebách.,
ačkoli doporučujeme výše uvedenou metodu, CSS s levým okrajem lze také přidat inline, jak je znázorněno na příkladu níže.
<p style="margin-left:2.5em">An example of a 5em left margin.</p>
příklad levého okraje 5em.
- Jak mohu odsadit nebo tab text na mé webové stránce nebo v HTML?
Přidat prostor pod řádek nebo odstavec textu
Pokud potřebujete přidat další prostor pod řádek nebo odstavec textu, a to pouze jednou, můžete použít <br> tag. Níže je uveden příklad toho, jak lze tuto techniku použít.,
<p>This sentence contains example text.<br><br>As you can see, two breaks add the space above.</p>
výše uvedený kód vytvoří níže uvedený text.
tato věta obsahuje příklad textu.
Jak vidíte, dvě přestávky přidávají prostor výše.
V případě potřeby lze přidat další přestávky. Doporučujeme však použít dříve uvedenou metodu CSS pro přidání polstrování a mezery kolem textu, pokud se provádí na více místech na stránce.
další informace
- jak zarovnat text na webové stránce v HTML nebo CSS.
- jak vytvořit neformátovaný text HTML.
- další informace a související odkazy naleznete v naší definici bílého prostoru.,
- HTML a web design Nápověda a podpora.