Ved at bruge denne side acceptere du samtidig Brugbarts og vores partneres brug af cookies.

Læs mere

Margin egenskaberne i CSS

Her kan du lære hvordan man anvender margin egenskaberne i CSS.

Redigeret: 2016-01-14 04:45

CSS Margin egenskaberne bliver brugt til at skabe plads udenfor siderne på et HTML element. Der er i alt fire sider på et element, som kan tilføjes margin.

Margin er det modsatte af padding. Hvor padding bliver brugt til at skabe plads indenævndigt i elementer, der bliver margin brugt til at skabe plads udenvendigt.

Properties

EgenskabFunktion
marginDen korte måde at angive margin på.
margin-topPlads tilhørende den øverste side på et element.
margin-rightPlads tilhørende højre side på et element.
margin-bottomPlads tilhørende den nederste side på et element.
margin-leftPlads tilhørende venstre side på et element.

Mulige værdier

  • auto (Default)
  • Længde Enhed
  • initial
  • inherit

Arvet? Nej!

Margin forklaring

Ønsker man at angive en margin for all fire sider på en gang, kan man med fordel gøre det på følgende måde:

div {
  margin: 1em;
}

Hvis man angiver ovenstående ved brug af de side-specifikke egenskaber, så vil det fylde en del mere, som vist nedenfor:

div {
  margin-top: 1em;
  margin-right: 1em;
  margin-bottom: 1em;
  margin-left: 1em;
}

Derfor vil det normalt være bedst at bruge margin, da det normalt kræver meget mindre kode.

Hvis længderne er forskellige kan man benytte sig af følgende:

div {
  margin: 1em 1em 3em 2em; /* top right bottom left */
}

Centrering af elementer

Når man ønsker at centrere elementer benytter man også margin, det er dog hovedsaligt til block elementer. Hvis der er tale om tekst bruger man text-align i stedet.

For at centrere et element, skal man både angive en width, og sætte margin-left og margin-right til auto. Den letteste måde at gøre det på, er nok som vist nedenfor:

div {
  width: 400px;
  margin: 0 auto; /* top right bottom left */
}

Ovenfor angiver vi faktisk både margin-left og margin-right på samme tid, det skyldes at den manglende venstre (left) værdi bliver kopieret fra den højre (right) værdi. Det samme gør sig gældende for de øvrige værdier. Så værdien for bottom bliver også kopieret.