I den här artikeln går vi igenom marginaler, deras funktion och hur vi anger marginaler med CSS.

Vad är egentligen en marginal?

Till varje element i HTML kan du sätta marginaler som används för att få en snygg och praktisk layout. För att enkelt åskådliggöra vad som menas med detta så använder vi oss av en stycke-tagg <p> där jag har lagt till en kantlinje.

Det här är en text som till skillnad från övrig text inte har någon marginal. Vare sig uppe, till höger, nere eller till vänster.
Det här är ett annat stycke som jag gett en 40px vänstermarginal och en toppmarginal på 10px för att separera stycket från det föregående.

Marginaler med extern CSS

Marginaler används överallt på din sajt för exempelvis stycken och därför är det nödvändigt att ge ett exempel på hur det skulle kunna se ut i din externa CSS-fil.

div#artikeltext p {
margin-top: 0;
margin-right: 40px;
margin-bottom: 20px;
margin-left: 40px;
}

Deklarationerna är ganska självförklarande. Stycket kommer inte att ha någon egen toppmarginal till föregående element, men väl en högermarginal, en bottenmarginal och en vänstermarginal.

Vi hade även kunnat skriva dessa deklarationer förkortat med:

div#artikeltext p {
margin: 0 40px 20px 40px;
}

När du använder dig av kortformen för marginaler så avser första värdet topp, andra värdet höger, tredje värdet botten och fjärde värdet vänster.

Margaler med inline CSS

Det här är ett exempel på hur man kan använda marginaler med intern CSS. I det här fallet en vänstermarginal.

Ibland lägger man till småsaker som man kanske bara kommer att använda en gång och därför är det inte så noga med att lägga in deklarationerna i den externa stilmallen.

Till höger har jag därför lagt in en textbox som visar att jag använt mig av en vänstermarginal till texten som omgärdar den.

Kod för detta (innefattar fler egenskaper än marginaler):

<div style="width: 120px; height: 120px; margin-left: 20px; float: right; padding: 10px; background-color:yellow; font-size:12px;">

<<< Egenskaper || Marginaler >>>

Hitta ett billigt webbhotell för din hemsida

12:-/mån
One Webbhotell Betyg
15:-/mån
Web10 Webbhotell Betyg
36:-/mån
Host Gator Webbhotell Betyg
36:-/mån
Surftown Webbhotell Betyg

Snabbguider

Nedanför finns information för dig som vill komma igång med en hemsida på snabbast möjliga sätt - utan fokus på webbspråk.

Ett litet "gilla" är också ett sätt att hjälpa sajten. =)