Style margin egenskab

Definition og brug

margin Egenskaben sætter eller returnerer elementets margin.

Denne egenskab kan have mellem én og fire værdier:

  • En værdi, f.eks.: div {margin: 50px} - Alle fire marginer er 50px
  • To værdier, f.eks.: div {margin: 50px 10px} - Øverste og nedre margin er 50px, venstre og højre margin er 10px
  • Tre værdier, f.eks.: div {margin: 50px 10px 20px} - Topmargin er 50px, venstre og højre margin er 10px, bundmargin er 20px
  • Fire værdier, for eksempel: div {margin: 50px 10px 20px 30px} - øverste kantmargen er 50px, højre kantmargen er 10px, nederste kantmargen er 20px, venstre kantmargen er 30px

Begge margin- og paddingegenskaber indsætter plads omkring elementet. Men forskellen er, at margin indsætter plads omkring kantbåndet, mens padding indsætter plads inde i elementets kantbånd.

Se også:

CSS tutorial:CSS margin

CSS reference manual:Kantmargenegenskab

Eksempel

Eksempel 1

Indstil alle fire kantmargener for <div>-elementet:

document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";

Prøv det selv

Eksempel 2

Ændr alle fire kantmargener for <div>-elementet til "25px":

document.getElementById("myDiv").style.margin = "25px";

Prøv det selv

Eksempel 3

Retur kantmargen for <div>-elementet:

alert(document.getElementById("myDiv").style.margin);

Prøv det selv

Eksempel 4

Forskellen mellem kantmargenegenskab og paddingegenskab:

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

Prøv det selv

Syntaks

Retur kantmargenegenskab:

object.style.margin

Indstil kantmargenegenskab:

object.style.margin = "%|length|auto|initial|inherit"

Egenskabsværdi

Værdi Beskrivelse
% Definer kantmargen som en procentdel af forældrelementets bredde.
length Definer kantmargen med længdeenhed.
auto Browseren indstiller kantmargen (alle fire kantmargener vil være ens).
initial Sæt denne egenskab til dens standardværdi. Se initial.
inherit Arv denne egenskab fra forældrelementet. Se inherit.

Tekniske detaljer

Standardværdi: 0
Returværdi: Streng, der angiver elementets kantmargen.
CSS version: CSS1

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support