CSS-margin

Fra Holstebro HTX Wiki
Skift til: navigering, søgning

Margin definerer en form for usynlig ydre grænse for et objekt, hvor andre objekter ikke kan befinde sig.

Brug

Margin defineres ved hjælp af margin-egenskaben i CSS og kan bruges på to måder: Enten ved at give hver side en margin individuelt eller ved at bruge "shorthand"-egenskaben.

Individuelle Sider

Man kan definere hver sides margin individuelt ved at bruge egenskaberne margin-top, -bottom, -left og -right

Eksempel

CSS

p.margin
{
margin-top:20px;
margin-bottom:20px;
margin-left:10px;
margin-right:5px;
}

HTML

<p>Tekst uden margin</p>
<p class="margin">Tekst med margin</p>

Resultat

Tekstmedudenmargin.png

"Shorthand"-metoden

Det er muligt at skrive alle sine margins op på en linje. Dette gør man ved hjælp af margin. På denne måde kan man vælge at skrive mellem 1 og 4 værdier, alt efter hvor mange forskellige marginer man vil have.

Eksempler

margin:10px;

Alle fire margins har en værdi på 10px.

margin:10px 5px;

Øverste og nederste margin har en værdi på 10px. Højre og venstre margin har en værdi på 5px.

margin:20px 10px 5px;

Øverste margin har en værdi på 20px. Højre og venstre margin har en værdi på 10px. Nederste margin har en værdi på 5px.

margin:20px 5px 10px 15px

Øverste margin har en værdi på 20px. Højre margin har en værdi på 5px. Nederste margin har en værdi på 10px. Venstre margin har en værdi på 15px.

Eksterne henvisninger

W3Schools om CSS-margins