CSS-stoppning


Innehållsförteckning

    Visa innehållsförteckning


Utfyllnad används för att skapa utrymme runt ett elements innehåll, innanför alla definierade kanter.


This element has a padding of 70px.

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

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).


Vaddering - enskilda sidor

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.

Exempel

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>




Utfyllnad - Stenografi egendom

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

Exempel

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

Exempel

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

Exempel

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

Exempel

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>



Vaddering och elementbredd

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.

Exempel

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.

Exempel

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>



Fler exempel

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.



Alla CSS-stoppningsegenskaper

padding

En förkortningsegenskap för att ställa in alla utfyllnadsegenskaper i en deklaration

padding-bottom

Ställer in bottenstoppningen för ett element

padding-left

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

padding-right

Ställer in rätt utfyllnad av ett element

padding-top

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