CSS-marginal


Innehållsförteckning

    Visa innehållsförteckning


Marginaler används för att skapa utrymme runt element, utanför alla definierade ramar.


This element has a margin of 70px.

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 70px;
  border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<h2>CSS Margins</h2>

<div>This element has a margin of 70px.</div>

</body>
</html>



CSS-marginaler

CSS-egenskaperna marginal används för att skapa utrymme runt element, utanför alla definierade gränser.

Med CSS har du full kontroll över marginalerna. Det finns fastigheter för att ställa in marginalen för varje sida av ett element (överst, höger, botten och vänster).


Marginal - enskilda sidor

CSS har egenskaper för att ange marginalen för varje sidan av ett element:

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

Alla marginalegenskaper kan ha följande värden:

  • auto - webbläsaren beräknar marginalen

  • längd - anger en marginal i px, pt, cm, etc.

  • % - anger en marginal i % av bredden på det innehållande elementet

  • ärv - anger att marginalen ska ärvas från det överordnade elementet

Tips: Negativa värden är tillåtna.

Exempel

Ställ in olika marginaler för alla fyra sidorna av ett <p>-element:

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>

</body>
</html>




Marginal - stenografisk egendom

För att förkorta koden är det möjligt att ange alla marginalegenskaper i en fastighet.

Egenskapen margin är en förkortad egenskap för följande individuella marginalegenskaper:

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

Så här är hur det fungerar:

Om egenskapen margin har fyra värden:

margin: 25px 50px 75px 100px; 
  • toppmarginalen är 25px

  • högermarginalen är 50px

  • bottenmarginalen är 75px

  • vänster marginal är 100px

Exempel

Använd egenskapen margin stenografi med fyra värden:

p {
  margin: 25px 50px 75px 100px;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 4 values</h2>

<div>This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.</div>

<hr>

</body>
</html>


Om egenskapen margin har tre värden:

margin: 25px 50px 75px;
  • övre marginalen är 25px

  • höger och vänster marginal är 50px

  • bottenmarginalen är 75px

Exempel

Använd egenskapen margin stenografi med tre värden:

p {	margin: 25px 50px 75px;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 3 values</h2>

<div>This div element has a top margin of 25px, a right and left margin of 50px, and a bottom margin of 75px.</div>

<hr>

</body>
</html>


Om egenskapen margin har två värden:

margin: 25px 50px;
  • övre och nedre marginalerna är 25px

  • höger och vänster marginal är 50px

Exempel

Använd egenskapen margin stenografi med två värden:

p {	margin: 25px 50px;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 2 values</h2>

<div>This div element has a top and bottom margin of 25px, and a right and left margin of 50px.</div>

<hr>

</body>
</html>


Om egenskapen margin har ett värde:

margin: 25px;
  • alla fyra marginalerna är 25px

Exempel

Använd egenskapen margin stenografi med ett värde:

p {
  margin: 25px;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 1 value</h2>

<div>This div element has a top, bottom, left, and right margin of 25px.</div>

<hr>

</body>
</html>



Det automatiska värdet

Du kan ställa in egenskapen margin till auto för att centrera elementet horisontellt i dess behållare.

Elementet kommer då att ta upp den angivna bredden och det återstående utrymmet kommer att delas lika mellan vänster och höger marginal.

Exempel

Använd marginal: auto:

div {
  width: 300px;
  margin: 
auto;
  border: 1px solid red;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}
</style>
</head>
<body>

<h2>Use of margin: auto</h2>
<p>You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:</p>

<div>
This div will be horizontally centered because it has margin: auto;
</div>

</body>
</html>



Arvvärdet

Det här exemplet låter vänstermarginalen på

-elementet ärvas från det överordnade elementet (<div>):

Exempel

Användning av arvsvärdet:

div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
    margin-left: 
inherit;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
</style>
</head>
<body>

<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>

<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>

</body>
</html>



Alla CSS-marginalegenskaper

margin

En förkortningsegenskap för att sätta alla marginalegenskaper i en deklaration

margin-bottom

Ställer in bottenmarginalen för ett element

margin-left

Ställer in den vänstra marginalen för ett element

margin-right

Ställer in högermarginalen för ett element

margin-top

Ställer in den övre marginalen för ett element