Utfyllnad används för att skapa utrymme runt ett elements innehåll, innanför alla definierade kanter.
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 70px;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<h2>CSS Padding</h2>
<div>This element has a padding of 70px.</div>
</body>
</html>
CSS-egenskaperna padding
används för att skapa utrymme runt ett elements innehåll, innanför alla definierade ramar.
Med CSS har du full kontroll över stoppningen. Det finns fastigheter för att ställa in stoppningen för varje sida av ett element (överst, höger, botten och vänster).
CSS har egenskaper för att ange utfyllnad för varje sidan av ett element:
padding-top
padding-right
padding-bottom
padding-left
Alla utfyllnadsegenskaper kan ha följande värden:
längd - anger en utfyllnad i px, pt, cm, etc.
% - anger en utfyllnad i % av bredden på det innehållande elementet
inherit - anger att utfyllnaden ska ärvas från det överordnade elementet
Obs! Negativa värden är inte tillåtna.
Ställ in olika utfyllnad för alla fyra sidorna av ett <div>-element:
div { padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>
</body>
</html>
För att förkorta koden är det möjligt att ange alla utfyllnadsegenskaper i en fastighet.
Egenskapen padding
är en förkortningsegenskap för följande individ stoppningsegenskaper:
padding-top
padding-right
padding-bottom
padding-left
Så här är hur det fungerar:
Om egenskapen padding
har fyra värden:
padding: 25px 50px 75px 100px;
toppstoppning är 25px
höger stoppning är 50px
bottenstoppningen är 75px
vänster stoppning är 100px
Använd utfyllnadsegenskapen med fyra värden:
div { padding: 25px 50px 75px 100px;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px 75px 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 4 values</h2>
<div>This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.</div>
</body>
</html>
Om egenskapen padding
har tre värden:
padding: 25px 50px 75px;
toppstoppning är 25px
höger och vänster stoppning är 50px
bottenstoppningen är 75px
Använd egenskapen utfyllnad stenografi med tre värden:
div { padding: 25px 50px 75px;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px 75px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 3 values</h2>
<div>This div element has a top padding of 25px, a right and left padding of 50px, and a bottom padding of 75px.</div>
</body>
</html>
Om egenskapen padding
har två värden:
padding: 25px 50px;
topp- och bottenstoppning är 25px
höger och vänster stoppning är 50px
Använd utfyllnadsegenskapen med två värden:
div { padding: 25px 50px;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 2 values</h2>
<div>This div element has a top and bottom padding of 25px, and a right and left padding of 50px.</div>
</body>
</html>
Om egenskapen padding
har ett värde:
padding: 25px;
alla fyra stoppningarna är 25px
Använd egenskapen utfyllnad stenografi med ett värde:
div { padding: 25px;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 1 value</h2>
<div>This div element has a top, bottom, left, and right padding of 25px.</div>
</body>
</html>
CSS-egenskapen width
anger bredden på elementets innehållsområde. De Innehållsområde är delen innanför utfyllnaden, gränsen och marginalen på ett element (lådmodellen).
Så om ett element har en specificerad bredd, kommer stoppningen som läggs till det elementet att göra det läggas till elementets totala bredd. Detta är ofta ett oönskat resultat.
Här ges <div>-elementet en bredd på 300px. Den faktiska bredden på <div>-elementet kommer dock att vara 350px (300px + 25px vänster stoppning + 25px höger stoppning):
div {
width: 300px;
padding: 25px;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Padding and element width</h2>
<div class="ex1">This div is 300px wide.</div>
<br>
<div class="ex2">The width of this div is 350px, even though it is defined as 300px in the CSS.</div>
</body>
</html>
För att hålla bredden på 300px, oavsett mängden stoppning, kan du använda box-sizing
egenskap. Detta gör att elementet bibehåller sin faktiska bredd; om om du ökar utfyllnaden kommer det tillgängliga innehållsutrymmet att minska.
Använd egenskapen box-sizing för att hålla bredden på 300px, oavsett mängd stoppning:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
box-sizing: border-box;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Padding and element width - with box-sizing</h2>
<div class="ex1">This div is 300px wide.</div>
<br>
<div class="ex2">The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.
</div>
</body>
</html>
Ställ in den vänstra stoppningen
<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-left: 2cm;
}
p.padding2 {
padding-left: 50%;
}
</style>
</head>
<body>
<h1>The padding-left Property</h1>
<p>This is a text with no left padding.</p>
<p class="padding">This text has a left padding of 2 cm.</p>
<p class="padding2">This text has a left padding of 50%.</p>
</body>
</html>
Det här exemplet visar hur man ställer in den vänstra utfyllnaden för ett <p>-element.
Ställ in rätt stoppning
<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-right: 2cm;
}
p.padding2 {
padding-right: 50%;
}
</style>
</head>
<body>
<h1>The padding-right Property</h1>
<p>This is a text with no right padding. This is a text with no right padding. This is a text with no right padding.</p>
<p class="padding">This text has a right padding of 2 cm. This text has a right padding of 2 cm. This text has a right padding of 2 cm.</p>
<p class="padding2">This text has a right padding of 50%. This text has a right padding of 50%. This text has a right padding of 50%.</p>
</body>
</html>
Det här exemplet visar hur man ställer in rätt utfyllnad av ett <p>-element.
Ställ in den övre stoppningen
<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-top: 2cm;
}
p.padding2 {
padding-top: 50%;
}
</style>
</head>
<body>
<h1>The padding-top Property</h1>
<p>This is a text with no top padding. This is a text with no top padding. This is a text with no top padding.</p>
<p class="padding">This text has a top padding of 2 cm. This text has a top padding of 2 cm. This text has a top padding of 2 cm.</p>
<p class="padding2">This text has a top padding of 50%. This text has a top padding of 50%. This text has a top padding of 50%.</p>
</body>
</html>
Det här exemplet visar hur man ställer in topputfyllnaden för ett <p>-element.
Ställ in bottenstoppningen
<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-bottom:2cm;
}
p.padding2 {
padding-bottom:50%;
}
</style>
</head>
<body>
<h1>The padding-bottom Property</h1>
<p>This is a text with no bottom padding. This is a text with no bottom padding. This is a text with no bottom padding.</p>
<p class="padding">This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm.</p>
<p class="padding2">This text has a bottom padding of 50%. This text has a bottom padding of 50%. This text has a bottom padding of 50%.</p>
</body>
</html>
Det här exemplet visar hur man ställer in bottenutfyllnaden för ett <p>-element.
En förkortningsegenskap för att ställa in alla utfyllnadsegenskaper i en deklaration
Ställer in bottenstoppningen för ett element
Ställer in den vänstra utfyllnaden för ett element
Ställer in rätt utfyllnad av ett element
Ställer in den övre stoppningen för ett element