CSS
marginaler

Syntax

• marginal: <övre & höger & nedre & vänster> ;
• marginal: <top> , <vänster & höger> , <bottom> ;
• marginal: <övre och nedre> , <vänster & höger> ;
• marginal: <topp> , <rätt> , <botom> , <vänster> ;
• margin-top: <top> ;
• marginal-höger: <rätt> ;
• marginalbotten: <bottom> ;
• marginal-vänster: <vänster> ;

parametrar

Anmärkningar

Applicera marginal på en given sida

Riktningspecifika egenskaper

Med CSS kan du ange en given sida att tillämpa marginal på. De fyra egenskaperna som tillhandahålls för detta ändamål är:

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

Följande kod skulle tillämpa en marginal på 30 pixlar på vänster sida av den valda div. Visa resultat

html

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

CSS

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

Ange riktning med hjälp av korta egenskaper

Standard margin egenskap kan expanderas för att ange olika bredder på varje sida av de valda elementen. Syntaxen för att göra detta är följande:

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

Följande exempel gäller en nollbreddmarginal till toppen av div, en 10px marginal till höger sida, en 50px marginal till vänster sida och en 100px marginal till vänster sida. Visa resultat

html

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

CSS

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

Marginal kollapsar

När två marginaler berör varandra vertikalt kollapsas de. När två marginaler berör horisontellt kollapsar de inte.

Exempel på intilliggande vertikala marginaler:

Tänk på följande stilar och markering:

div{
    margin: 10px;
}

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

De kommer att vara 10px från varandra eftersom vertikala marginaler kollapsar över ett och annat. (Avståndet är inte summan av två marginaler.)

Exempel på intilliggande horisontella marginaler:

Tänk på följande stilar och markering:

span{
    margin: 10px;
}

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

De kommer att vara 20px från varandra eftersom horisontella marginaler inte kollapsar över det ena och det andra. (Avståndet är summan av två marginaler.)

Överlappande med olika storlekar

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

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

Dessa element kommer att vara 15px åtskilda vertikalt. Marginalerna överlappar så mycket de kan, men den större marginalen bestämmer avståndet mellan elementen.

Överlappande marginal 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>

Vilket är avståndet mellan de två texterna? (håll muspekaren för att se svaret)

Avståndet är 25px. Eftersom alla fyra marginaler berör varandra kommer de att kollapsa och därmed använda den största marginalen av de fyra.

Vad sägs nu om vi lägger till några gränser till markeringen ovan.

div{
    border: 1px solid red;
}

Vilket är avståndet mellan de två texterna? (håll muspekaren för att se svaret)

Avståndet blir 59px! Nu är det bara marginalerna för .outer-top och .outer-botten som berör varandra och är de enda kollapsade marginalerna. De återstående marginalerna är separerade av gränserna. Så vi har 1px + 10px + 1px + 15px + 20 px + 1 px + 25 px + 1 px (1px är gränserna ...)

Samla marginaler mellan förälder och barnelement:

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;
}

I exemplet ovan gäller endast den största marginalen. Du kanske har förväntat dig att avsnittet skulle vara beläget 60px från h1 (eftersom div-elementet har en marginal-topp på 40px och p har en 20px marginal-top). Detta händer inte eftersom marginalerna kollapsar ihop och bildar en marginal.

Centrera element horisontellt på en sida med marginal

Så länge elementet är ett block , och det har ett uttryckligt inställt breddvärde , kan marginaler användas för att centrera blockelement på en sida horisontellt.

Vi lägger till ett breddvärde som är lägre än bredden på fönstret och den automatiska egenskapen för marginal fördelar sedan återstående utrymme till vänster och höger:

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

I exemplet ovan använder vi den korta margin att först sätta 0 till värdena för övre och nedre marginal (även om detta kan vara vilket värde som helst) och sedan använder vi auto att låta webbläsaren tilldela utrymmet automatiskt till vänster- och högermarginalvärden.

I exemplet ovan är #myDiv-elementet inställt på 80% bredd vilket ger 20% rester. Webbläsaren distribuerar detta värde till de återstående sidorna så:

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

Förenkling av marginalfastigheter

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;
}

En annan exapmle:

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) */
}

Negativa marginaler

Margin är en av få CSS-egenskaper som kan ställas in på negativa värden. Den här egenskapen kan användas för att överlappa element utan absolut positionering .

div{
  display: inline;
}

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

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

Exempel 1:

Det är uppenbart att anta att det procentuella värdet för marginal till margin-left och margin-right skulle vara relativt dess överordnade element.

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

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

Men det är inte fallet när det gäller margin-top och margin-bottom . Båda dessa egenskaper, i procent, är inte i förhållande till höjden på överordnad behållare utan bredden på överordnad behållare.

Så,

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

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