uppdaterad: 12/30/2019 av Computer Hope

skapa extra utrymme i 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.,

skapa extra mellanslag före eller efter text

en av de mest förvirrande sakerna för nya användare som skapar en webbsida är att de inte kan trycka på mellanslagstangenten flera gånger göra ytterligare mellanslag. För att skapa extra mellanslag före, efter eller mellan din text, använd &(non-breaking space) utökat HTML-tecken.

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

extra    space
Obs

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

tips

för en lista med utökade Special HTML-tecken, Se: fullständig lista över utökade Special HTML-tecken.

håll avstånd i text som klistras in på en sida

om du klistrar in text med extra mellanslag eller flikar kan du använda HTML<pre> – taggen för att behålla texten formaterad., Nedan följer ett exempel på hur du klistrar in text med extra mellanslag med taggen <pre>.

This text has lots of spaces

exemplet ovan görs med hjälp av nedanstående HTML-kod.

<pre class="tab">This text has lots of spaces</pre>
  • se vår HTML <pre> taggsida för ytterligare information om den här taggen.
Obs

om du använder en WYSIWYG-redigerare för att ange koden ovan måste du vara i HTML-fliken eller redigera HTML-koden.,

skapa extra utrymme runt ett element eller objekt

alla HTML-element kan ha ytterligare avstånd till toppen, höger, botten eller vänster. Se dock till att du förstår skillnaden mellan marginal och stoppning innan du bestämmer vilken typ av utrymme du vill lägga till runt elementet eller objektet. Som framgår av bilden nedan omger stoppning elementet, inom gränsen och marginalen utanför gränsen.

exemplet nedan visar vår punkt omgiven av en kant, indragen med en marginal, och med avstånd på höger och botten.,

ett exempel på ett stycke med marginal och stoppning.

exemplet ovan skapades med hjälp av koden nedan.

i den första delen av koden lägger ”margin-left: 2.5 em;” till en vänster marginal på 2.5 em, vilket ger utseendet på indragen text. Som framgår av exemplet är detta avstånd utanför gränsen. I nästa avsnitt definierar ”stoppning: 0 7em 2em 0;” toppen, höger, botten och vänster (medurs) stoppning. Det finns” 0 ”topp stoppning,” 7em ” höger stoppning,” 2em ” botten stoppning, och 0 vänster stoppning., Resten av detta exempel definierar hur gränsen ska se ut.

skapa en flik med 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änster marginal på 2,5 em från elementet som innehåller texten. CSS för att skapa denna vänstra marginal visas nedan.

.tab { margin-left: 2.5em}

Efter att ha placerat den här koden i vår CSS-fil kan vi tillämpa klassen ”tab” på vilken text som helst för att skapa utseendet på en flik. Värdet på marginalen-vänster kan ökas eller minskas beroende på dina behov.,

även om vi rekommenderar metoden ovan, kan css-marginalen vänster också läggas inline som visas i exemplet nedan.

<p style="margin-left:2.5em">An example of a 5em left margin.</p>

ett exempel på en 5EM vänster marginal.

  • Hur skriver jag in eller skriver in text på min webbsida eller i HTML?

Lägg till utrymme under en rad eller ett stycke text

om du behöver lägga till extra utrymme under en rad eller ett stycke text, och bara behöver göra det en gång, kan du använda<br> taggen. Nedan är ett exempel på hur denna teknik kan tillämpas.,

<p>This sentence contains example text.<br><br>As you can see, two breaks add the space above.</p>

koden ovan skapar texten som visas nedan.

denna mening innehåller exempeltext.
som du kan se lägger två pauser till utrymmet ovan.

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

ytterligare information

  • hur man justerar text på en webbsida i HTML eller CSS.
  • hur man skapar oformaterad HTML-text.
  • se vår white space definition för ytterligare information och relaterade länkar.,
  • HTML och webbdesign hjälp och support.