Marginaler används för att skapa utrymme runt element, utanför alla definierade ramar.
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-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).
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.
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>
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
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
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
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
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>
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.
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>
Det här exemplet låter vänstermarginalen på
-elementet ärvas från det överordnade elementet (<div>):
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>
En förkortningsegenskap för att sätta alla marginalegenskaper i en deklaration
Ställer in bottenmarginalen för ett element
Ställer in den vänstra marginalen för ett element
Ställer in högermarginalen för ett element
Ställer in den övre marginalen för ett element