Style margin egenskap

Definition och användning

margin Egenskapen ställer in eller returnerar elementets kantmarginal.

Denna egenskap kan använda en till fyra värden:

  • Ett värde, till exempel: div {margin: 50px} - Alla fyra kanter är 50px
  • Två värden, till exempel: div {margin: 50px 10px} - Överkant och nederkant är 50px, vänster och höger kanter är 10px
  • Tre värden, till exempel: div {margin: 50px 10px 20px} - Överkanter är 50px, vänster och höger kanter är 10px, nederkanter är 20px
  • Fyra värden, till exempel: div {margin: 50px 10px 20px 30px} - övre marginalen är 50px, högra marginalen är 10px, nedre marginalen är 20px, vänstra marginalen är 30px

Marginal-egenskapen och padding-egenskapen lägger till utrymme runt elementet. Men skillnaden är att marginaler lägger till utrymme runt ramen, medan padding lägger till utrymme inom elementets ram.

Se också:

CSS-lärarlektion:CSS marginalitet

CSS referenshandbok:Marginal-egenskapen

Exempel

Exempel 1

Ställ in alla fyra marginaler för <div>-elementet:

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

Prova själv

Exempel 2

Ändra alla fyra marginaler för <div>-elementet till "25px":

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

Prova själv

Exempel 3

Returnera <div>-elementets marginal:

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

Prova själv

Exempel 4

Skillnaden mellan marginal-egenskapen och padding-egenskapen:

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

Prova själv

Syntaks

Returnera marginal-egenskapen:

object.style.margin

Ställ in marginal-egenskapen:

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

Egenskapsvärde

Värde Beskrivning
% Definiera marginaler som en procentandel av föräldrelementets bredd.
length Definiera marginaler med längd-enheter.
auto Browsern inställer marginaler (alla fyra marginaler kommer att vara lika).
initial Ställ in detta egenskap till dess standardvärde. Se initial.
inherit Följer detta egenskap från sitt föräldrelement. Se inherit.

Tekniska detaljer

Standardvärde: 0
Returvärde: Sträng, som representerar elementets marginal.
CSS version: CSS1

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd