CSS
marges

Syntaxis

• marge: <boven & rechts & onder & links> ;
• marge: <top> , <links & rechts> , <bodem> ;
• marge: <boven & onder> , <links & rechts> ;
• margin: <top> , <right> , <bottom> , <left> ;
• margin-top: <top> ;
• margin-right: <recht> ;
• margin-bottom: <bodem> ;
• margin-left: <left> ;

parameters

Opmerkingen

Marge toepassen op een gegeven zijde

Richting-specifieke eigenschappen

Met CSS kunt u een gegeven zijde opgeven waarop marge moet worden toegepast. De vier eigenschappen voor dit doel zijn:

• margin-left
• margin-right
• margin-top
• margin-bottom

De volgende code past een marge van 30 pixels toe aan de linkerkant van de geselecteerde div. Bekijk resultaat

HTML

<div id="myDiv"></div>

CSS

#myDiv {
    margin-left: 30px;
    height: 40px;
    width: 40px;
    background-color: red;
}

Richting opgeven met behulp van steno-eigenschap

De standaard margin eigenschap kan worden uitgebreid om verschillende breedten aan elke zijde van de geselecteerde elementen op te geven. De syntaxis hiervoor is als volgt:

margin: <top> <right> <bottom> <left>;

In het volgende voorbeeld wordt een marge met nul breedte toegepast op de bovenkant van de div, een marge van 10 px aan de rechterkant, een marge van 50 px aan de linkerkant en een marge van 100 px aan de linkerkant. Bekijk resultaat

HTML

<div id="myDiv"></div>

CSS

#myDiv {
    margin: 0 10px 50px 100px;
    height: 40px;
    width: 40px;
    background-color: red;
}

Marge instortend

Wanneer twee marges elkaar verticaal raken, worden ze samengevouwen. Wanneer twee marges horizontaal elkaar raken, vallen ze niet in elkaar.

Voorbeeld van aangrenzende verticale marges:

Overweeg de volgende stijlen en markeringen:

div{
    margin: 10px;
}

<div>
    some content
</div>
<div>
    some more content
</div>

Ze zullen 10 px uit elkaar liggen, omdat verticale marges over elkaar instorten. (De afstand is niet de som van twee marges.)

Voorbeeld van aangrenzende horizontale marges:

Overweeg de volgende stijlen en markeringen:

span{
    margin: 10px;
}

<span>some</span><span>content</span>

Ze zullen 20 px uit elkaar liggen, omdat horizontale marges niet over elkaar instorten. (De afstand is de som van twee marges.)

Overlappend met verschillende maten

.top{
    margin: 10px;
}
.bottom{
    margin: 15px;
}

<div class="top">
    some content
</div>
<div class="bottom">
    some more content
</div>

Deze elementen staan verticaal 15px uit elkaar. De marges overlappen elkaar zoveel mogelijk, maar de grotere marge bepaalt de afstand tussen de elementen.

Overlappende marge gotcha

.outer-top{
    margin: 10px;
}
.inner-top{
    margin: 15px;
}
.outer-bottom{
    margin: 20px;
}
.inner-bottom{
    margin: 25px;
}

<div class="outer-top">
    <div class="inner-top">
        some content
    </div>
</div>
<div class="outer-bottom">
    <div class="inner-bottom">
        some more content
    </div>
</div>

Wat zal de afstand tussen de twee teksten zijn? (beweeg om antwoord te zien)

De afstand is 25 px. Omdat alle vier de marges elkaar raken, zullen ze instorten, waardoor de grootste marge van de vier wordt gebruikt.

Wat als we nu wat randen toevoegen aan de opmaak hierboven.

div{
    border: 1px solid red;
}

Wat zal de afstand tussen de twee teksten zijn? (beweeg om antwoord te zien)

De afstand is 59 px! Nu raken alleen de marges van .outer-top en .outer-bottom elkaar, en zijn de enige samengevouwen marges. De resterende marges worden gescheiden door de randen. Dus we hebben 1px + 10px + 1px + 15px + 20 px + 1 px + 25 px + 1 px. (De 1px's zijn de grenzen ...)

Samenvallende marges tussen ouder- en onderliggende elementen:

HTML:

<h1>Title</h1>
<div>
  <p>Paragraph</p>
</div>

CSS

h1 {
  margin: 0;
  background: #cff;
}
div {
  margin: 50px 0 0 0;
  background: #cfc;
}
p {
  margin: 25px 0 0 0;
  background: #cf9;
}

In het bovenstaande voorbeeld is alleen de grootste marge van toepassing. U had misschien verwacht dat de alinea zich op 60 px van de h1 zou bevinden (omdat het div-element een margin-top van 40 px heeft en de p een 20 px-margin-top heeft). Dit gebeurt niet omdat de marges samenvallen en één marge vormen.

Elementen op een pagina horizontaal centreren met behulp van marge

Zolang het element een blok is en een expliciet ingestelde breedtewaarde heeft , kunnen marges worden gebruikt om blokelementen horizontaal op een pagina te centreren.

We voegen een breedtewaarde toe die kleiner is dan de breedte van het venster en de auto-eigenschap van marge verdeelt vervolgens de resterende ruimte links en rechts:

#myDiv {
 width:80%;
 margin:0 auto;
}

In het bovenstaande voorbeeld gebruiken we de verkorte margin aangifte om eerst 0 te stellen op de bovenste en onderste marge (hoewel dit elke waarde kan zijn) en vervolgens gebruiken we auto om de browser de ruimte automatisch toe te wijzen aan de linker- en rechtermarge-waarden.

In het bovenstaande voorbeeld is het #myDiv-element ingesteld op 80% breedte, waardoor er 20% resterend is. De browser verdeelt deze waarde over de resterende zijden dus:

(100% - 80%) / 2 = 10%

Vereenvoudiging van de marge

p {
    margin:1px;                /* 1px margin in all directions */
    
    /*equals to:*/
    
    margin:1px 1px;
    
    /*equals to:*/
    
    margin:1px 1px 1px;
    
    /*equals to:*/
    
    margin:1px 1px 1px 1px;
}

Nog een voorbeeld:

p{
    margin:10px 15px;        /* 10px margin-top & bottom And 15px margin-right & left*/
    
    /*equals to:*/
    
    margin:10px 15px 10px 15px;
    
    /*equals to:*/
    
    margin:10px 15px 10px;
    /* margin left will be calculated from the margin right value (=15px) */
}

Negatieve marges

Marge is een van de weinige CSS-eigenschappen die op negatieve waarden kunnen worden ingesteld. Deze eigenschap kan worden gebruikt om elementen te overlappen zonder absolute positionering .

div{
  display: inline;
}

#over{
  margin-left: -20px;
}

<div>Base div</div>
<div id="over">Overlapping div</div>

Voorbeeld 1:

Het ligt voor de hand om aan te nemen dat de procentuele waarde van marge naar margin-left en margin-right relatief is ten opzichte van het bovenliggende element.

.parent {
    width : 500px;
    height: 300px;
}

.child {
    width : 100px;
    height: 100px;
    margin-left: 10%;  /* (parentWidth * 10/100) => 50px */
}

Maar dat is niet het geval als het gaat om margin-top en margin-bottom . Beide eigenschappen, in percentages, zijn niet gerelateerd aan de hoogte van de bovenliggende container maar aan de breedte van de bovenliggende container.

Zo,

.parent {
    width : 500px;
    height: 300px;
}

.child {
    width : 100px;
    height: 100px;
    margin-left: 10%;  /* (parentWidth * 10/100) => 50px  */
    margin-top: 20%;   /* (parentWidth * 20/100) => 100px */
}