CSS polstring

Indholdsfortegnelse

    Vis indholdsfortegnelse

Polstring bruges til at skabe rum omkring et elements indhold, inden for enhver defineret grænse.

This element has a padding of 70px.

Prøv det selv →

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

CSS-egenskaberne padding bruges til at generere plads omkring et elements indhold inden for alle definerede grænser.

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

Polstring - individuelle sider

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

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Alle udfyldningsegenskaberne kan have følgende værdier:

  • længde - angiver en polstring i px, pt, cm osv.

  • % - angiver en polstring i % af bredden af det indeholdende element

  • inherit - angiver, at polstringen skal nedarves fra det overordnede element

Bemærk: Negative værdier er ikke tilladt.

Eksempel

Indstil forskellig polstring for alle fire sider af et <div>-element:

 div {	padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Prøv det selv →

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

Polstring - stenografi ejendom

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

Egenskaben padding er en stenografi-egenskab for følgende person polstring egenskaber:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Så her er hvordan det virker:

Hvis egenskaben padding har fire værdier:

padding: 25px 50px 75px 100px;

  • toppolstring er 25px

  • højre polstring er 50px

  • bundpolstring er 75px

  • venstre polstring er 100px

Eksempel

Brug egenskaben polstring stenografi med fire værdier:

 div {	  padding: 25px 50px 75px 100px;
}

Prøv det selv →

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

Hvis egenskaben padding har tre værdier:

padding: 25px 50px 75px;

  • toppolstring er 25px

  • højre og venstre polstring er 50px

  • bundpolstring er 75px

Eksempel

Brug egenskaben polstring stenografi med tre værdier:

 div {	  padding: 25px 50px 75px;
}

Prøv det selv →

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

Hvis egenskaben padding har to værdier:

padding: 25px 50px;

  • top og bund polstring er 25px

  • højre og venstre polstring er 50px

Eksempel

Brug egenskaben polstring stenografi med to værdier:

 div {	  padding: 25px 50px;
}

Prøv det selv →

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

Hvis egenskaben padding har én værdi:

padding: 25px;

  • alle fire polstringer er 25px

Eksempel

Brug egenskaben polstring stenografi med én værdi:

 div {	  padding: 25px;
}

Prøv det selv →

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

Polstring og elementbredde

CSS-egenskaben width angiver bredden af elementets indholdsområde. Det indholdsområde er delen inden for polstringen, kanten og margenen af et element (kassemodellen).

Så hvis et element har en specificeret bredde, vil den polstring, der tilføjes til det element, gøre det lægges til elementets samlede bredde. Dette er ofte et uønsket resultat.

Eksempel

Her får <div>-elementet en bredde på 300px. Den faktiske bredde af <div>-elementet vil dog være 350px (300px + 25px venstre polstring + 25px højre polstring):

 div {
  width: 300px;
  padding: 25px;
}

Prøv det selv →

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

For at holde bredden på 300px, uanset mængden af polstring, kan du bruge box-sizing egenskab. Dette får elementet til at bevare sin faktiske bredde; hvis hvis du øger polstringen, vil den tilgængelige indholdsplads mindskes.

Eksempel

Brug egenskaben til boksstørrelse til at holde bredden på 300px, uanset hvad mængde polstring:

 div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Prøv det selv →

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

Flere eksempler

Indstil venstre polstring

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

Dette eksempel viser, hvordan man indstiller venstre polstring af et <p>-element.

Indstil den rigtige polstring

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

Dette eksempel viser, hvordan man indstiller den rigtige udfyldning af et <p>-element.

Indstil den øverste polstring

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

Dette eksempel viser, hvordan man indstiller den øverste polstring af et <p>-element.

Indstil bundpolstringen

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

Dette eksempel viser, hvordan man indstiller bundpolstringen af et <p>-element.

Alle CSS-polstringsegenskaber

padding

En stenografiegenskab til indstilling af alle udfyldningsegenskaber i én erklæring

padding-bottom

Indstiller bundpolstringen af et element

padding-left

Indstiller venstre polstring af et element

padding-right

Indstiller den rigtige polstring af et element

padding-top

Indstiller den øverste polstring af et element