CSS-margen

Indholdsfortegnelse

Marginer bruges til at skabe plads omkring elementer uden for definerede grænser.

This element has a margin of 70px.

Prøv det selv →

<!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-margener

CSS-egenskaberne margin bruges til at skabe rum omkring elementer, uden for nogen definerede grænser.

Med CSS har du fuld kontrol over marginalerne. Der er ejendomme til indstilling af margenen for hver side af et element (øverst, højre, bund og venstre).

Margin - individuelle sider

CSS har egenskaber til at angive margenen for hver side af et element:

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

Alle margenegenskaberne kan have følgende værdier:

auto - browseren beregner marginen
længde - angiver en margen i px, pt, cm osv.
% - angiver en margen i % af bredden af det indeholdende element
inherit - angiver, at marginen skal nedarves fra det overordnede element

Tip: Negative værdier er tilladt.

Eksempel

Indstil forskellige margener for alle fire sider af et <p>-element:

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

Prøv det selv →

<!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>

Margin - stenografi ejendom

For at forkorte koden er det muligt at angive alle marginegenskaberne i én ejendom.

Egenskaben margin er en stenografiegenskab for følgende individuelle margenegenskaber:

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

Så her er hvordan det virker:

Hvis egenskaben margin har fire værdier:

margin: 25px 50px 75px 100px;

topmargen er 25px
højre margen er 50px
bundmargen er 75px
venstre margen er 100px

Eksempel

Brug egenskaben margin stenografi med fire værdier:

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

Prøv det selv →

<!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>

Hvis egenskaben margin har tre værdier:

margin: 25px 50px 75px;

topmargen er 25px
højre og venstre marginer er 50px
bundmargen er 75px

Eksempel

Brug egenskaben margin stenografi med tre værdier:

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

Prøv det selv →

<!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>

Hvis egenskaben margin har to værdier:

margin: 25px 50px;

top- og bundmargener er 25px
højre og venstre marginer er 50px

Eksempel

Brug egenskaben margin stenografi med to værdier:

p {	margin: 25px 50px;
}

Prøv det selv →

<!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>

Hvis egenskaben margin har én værdi:

margin: 25px;

alle fire marginer er 25px

Eksempel

Brug egenskaben margin stenografi med én værdi:

p {
  margin: 25px;
}

Prøv det selv →

<!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>

Den automatiske værdi

Du kan indstille egenskaben margin til auto for at centrere elementet vandret i dets container.

Elementet vil derefter optage den angivne bredde og den resterende plads vil blive delt ligeligt mellem venstre og højre margen.

Eksempel

Brug margen: auto:

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

Prøv det selv →

<!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>

Arveværdien

Dette eksempel lader venstre margen af

-elementet arves fra det overordnede element (<div>):

Eksempel

Brug af arveværdien:

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

Prøv det selv →

<!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>

Alle CSS-marginegenskaber

margin: En stenografi-egenskab til at angive alle marginegenskaberne i én erklæring
margin-bottom: Indstiller bundmargenen for et element
margin-left: Indstiller venstre margen for et element
margin-right: Indstiller højre margen for et element
margin-top: Indstiller den øverste margen for et element