Hur man skapar extra utrymme i HTML eller en webbsida

Att skapa extra utrymme i din HTML på en webbsida kan uppnås på många sätt beroende på vilken typ av utrymme du vill skapa. Följande avsnitt innehåller många av de olika sätten att skapa extra utrymme med både HTML och CSS.

En av de mest förvirrande sakerna för nya användare som skapar sin egen webbsida är att de inte kan trycka på mellanslag flera gånger skapa ytterligare mellanslag. Om du vill skapa extra mellanslag före, efter eller mellan texten använder du (non-breaking space) utökat HTML-tecken.

Till exempel, med "extra utrymme" har vi följande kod i vår HTML.

 extra utrymme 

Obs! Om du använder en WYSIWYG-editor för att ange ovanstående kod måste du vara i HTML-fliken eller redigera HTML-koden.

  • Fullständig lista över utökade speciella HTML-tecken.

Håll mellanslag i text som klistras in på en sida

Om du klistrar text med extra mellanslag eller flikar kan du använda HTML

 tagg för att hålla texten formaterad. Nedan är ett exempel på hur man klistrar in text med extra mellanslag med hjälp av 
 märka.

 Denna text har massor av mellanslag 

Exemplet ovan är gjort med hjälp av HTML-koden nedan.

 Denna text har massor av mellanslag 

Obs! Om du använder en WYSIWYG-editor för att ange koden ovan måste du vara i HTML-fliken eller redigera HTML-koden.

  • Se vår HTML
     tagg sida för mer information om denna tagg.

Skapa extra utrymme runt ett element eller objekt

Alla HTML-element kan ha ytterligare avstånd läggas till överst, höger, botten eller vänster. Det är dock viktigt att du förstår skillnaden mellan marginal och vaddering innan du bestämmer vilken typ av utrymme du vill lägga till runt elementet eller ett annat objekt. Som du kan se på bilden nedan är vaddering det som omedelbart omger elementet, inom gränsen och marginen utanför gränsen.

I exemplet nedan är vår paragraf omgiven av en gräns, indragad med en marginal och har plats till höger och längst ner i stycket.

Ett exempel på en punkt med marginal och vaddering.

Exemplet ovan skapades med hjälp av koden nedan.

Exempel på en paragraf med marginal och vaddering.

I den första delen av koden, "margin-left: 2.5em;" lägger till en vänstra margin på 2, 5 em, vilket ger utseendet på indragen text. Som det framgår av exemplet ligger detta avstånd utanför gränsen. I nästa avsnitt, "padding: 0 7em 2em 0;" definierar topp, höger, botten och vänster (medsols) stoppning. Det finns "0" toppadding, "7em" högerpolning, "2em" bottenplastning och 0 vänster polstring. Resten av det här exemplet definierar hur gränsen ska se ut.

Skapa en flik med hjälp av CSS och HTML

En flik kan skapas i HTML genom att justera den vänstra marginalen för ett element. Till exempel har denna punkt en vänstra margin på 2, 5 em från det element som innehåller texten. CSS för att skapa denna vänstra marginal visas nedan.

 .tab {margin-left: 2.5em} 

Efter att du har placerat den här koden i vår CSS-fil kan vi använda klassen "flik" till vilken text som helst för att skapa utseendet på en flik. Värdet av marginal-vänster kan ökas eller minskas beroende på dina behov.

Även om vi rekommenderar metoden ovan kan marginal-vänster CSS också läggas till inline som visas i exemplet nedan.

Ett exempel på en 5em vänster marginal.

Ett exempel på en 5em vänster marginal.

  • Hur lägger jag in eller flikar text på min webbsida eller i HTML?

Om du behöver lägga till extra utrymme under en rad eller texttext, och behöver bara göra det en gång, kan du använda

tagg för att lägga till extra utrymme i ett dokument. Nedan är ett exempel på hur denna teknik kan tillämpas.

Denna mening innehåller exempeltext.

Som du kan se tillsattes två raster för att skapa utrymmet ovanför.

Koden ovan skulle skapa texten som visas nedan.

Denna mening innehåller exempeltext.

Som du kan se tillsattes två raster för att skapa utrymmet ovanför.

Ytterligare raster kan läggas till vid behov. Vi föreslår dock att du använder CSS-metoden som nämnts tidigare för att lägga till vaddering och avstånd runt din text om det görs på flera ställen på en sida.