CSS margin eigenschap

Definitie en gebruik

De margin-afkortingseigenschap stelt alle margineigenschappen in in één verklaring. Deze eigenschap kan 1 tot 4 waarden hebben.

Uitleg

Deze afkortingseigenschap stelt de breedte van alle marges van een element in, of de breedte van de marges van elke zijde in.

De verticale nabijgelegen marges van blokelementen worden samengevoegd, en inline-elementen nemen eigenlijk geen bovengelijke en onderste marges in beslag. De linker en rechter marges van inline-elementen worden niet samengevoegd. Op dezelfde manier worden de marges van float-elementen ook niet samengevoegd. Negatieve margewaarden kunnen worden opgegeven, maar gebruik ze met voorzichtigheid.

Opmerking:Negatieve waarden zijn toegestaan.

Voorbeeld 1

margin:10px 5px 15px 20px;
  • De bovenste marge is 10px
  • De rechter marge is 5px
  • De onderste marge is 15px
  • De linker marge is 20px

Voorbeeld 2

margin:10px 5px 15px;
  • De bovenste marge is 10px
  • De rechter marges en linker marges zijn 5px
  • De onderste marge is 15px

Voorbeeld 3

margin:10px 5px;
  • De bovenste marges en onderste marges zijn 10px
  • De rechter marges en linker marges zijn 5px

Voorbeeld 4

margin:10px;
  • Alle 4 marges zijn 10px

Zie ook:

CSS tutorial:CSS marge

HTML DOM referentiehandleiding:margin-eigenschap

Voorbeeld

Stel de 4 marges van het p-element in:

p
  {
  margin:2cm 4cm 3cm 4cm;
  }

Probeer het zelf uit

CSS syntax

margin: length|auto|initial|inherit;

Eigenschapswaarde

Waarde Beschrijving
auto De browser berekent de marges.
length Stelt dat de margewaarde wordt opgegeven in een specifieke eenheid, zoals pixels, centimeters, enz. De standaardwaarde is 0px.
% Specificeer de marges als een percentage van de breedte van het omvattende element.
inherit Stelt dat de marges moeten worden geërfd van de ouder-element.

Technische details

Standaardwaarde: 0
Inherits: nee
Versie: CSS1
JavaScript syntax: object.style.margin="10px 5px"

Meer voorbeelden

Alle margineigenschappen in één verklaring
Dit voorbeeld toont hoe alle margineigenschappen in één verklaring worden ingesteld.

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

Chrome IE / Edge Firefox Safari Opera
1.0 6.0 1.0 1.0 3.5