CSS padding

Obsah

Výplň se používá k vytvoření prostoru kolem obsahu prvku uvnitř jakýchkoli definovaných hranic.

This element has a padding of 70px.

Zkuste to sami →

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

Vlastnosti CSS padding se používají ke generování prostoru kolem obsah prvku uvnitř jakýchkoli definovaných hranic.

S CSS máte plnou kontrolu nad výplní. Existují vlastnosti pro nastavení odsazení pro každou stranu prvku (nahoře, vpravo, dole a vlevo).

Polstrování - jednotlivé strany

CSS má vlastnosti pro specifikaci odsazení pro každý z nich strana prvku:

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

Všechny vlastnosti výplně mohou mít následující hodnoty:

délka - určuje výplň v px, pt, cm atd.
% - určuje výplň v % šířky obsahujícího prvku
dědit - určuje, že výplň by měla být zděděna z nadřazeného prvku

Poznámka: Záporné hodnoty nejsou povoleny.

Příklad

Nastavte různé odsazení pro všechny čtyři strany prvku <div>:

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

Zkuste to sami →

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

Padding - těsnopisná vlastnost

Pro zkrácení kódu je možné zadat všechny vlastnosti výplně jednu nemovitost.

Vlastnost padding je zkrácená vlastnost pro následující osobu vlastnosti výplně:

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

Funguje to takto:

Pokud má vlastnost padding čtyři hodnoty:

padding: 25px 50px 75px 100px;

horní výplň je 25 pixelů
pravá výplň je 50px
spodní výplň je 75 pixelů
levé odsazení je 100px

Příklad

Použijte zkrácenou vlastnost padding se čtyřmi hodnotami:

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

Zkuste to sami →

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

Pokud má vlastnost padding tři hodnoty:

padding: 25px 50px 75px;

horní výplň je 25 pixelů
pravé a levé odsazení je 50px
spodní výplň je 75 pixelů

Příklad

Použijte zkrácenou vlastnost padding se třemi hodnotami:

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

Zkuste to sami →

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

Pokud má vlastnost padding dvě hodnoty:

padding: 25px 50px;

horní a spodní odsazení je 25 pixelů
pravé a levé odsazení je 50px

Příklad

Použijte zkrácenou vlastnost padding se dvěma hodnotami:

 div {	  padding: 25px 50px;
}

Zkuste to sami →

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

Pokud má vlastnost padding jednu hodnotu:

padding: 25px;

všechny čtyři výplně mají 25 pixelů

Příklad

Použijte zkrácenou vlastnost padding s jednou hodnotou:

 div {	  padding: 25px;
}

Zkuste to sami →

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

Výplň a šířka prvku

Vlastnost CSS width určuje šířku oblasti obsahu prvku. The oblast obsahu je část uvnitř výplně, ohraničení a okraje prvku (krabicový model).

Pokud má tedy prvek zadanou šířku, výplň přidaná k tomuto prvku bude se přičte k celkové šířce prvku. To je často nežádoucí výsledek.

Příklad

Zde má prvek <div> šířku 300 pixelů. Skutečná šířka prvku <div> však bude 350 pixelů (300 pixelů + 25px levého odsazení + 25px pravého odsazení):

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

Zkuste to sami →

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

Chcete-li zachovat šířku 300 pixelů, bez ohledu na množství odsazení, můžete použít vlastnost box-sizing. To způsobí, že si prvek zachová svou skutečnou šířku; -li zvětšíte-li výplň, zmenší se dostupný prostor pro obsah.

Příklad

Pomocí vlastnosti box-sizing ponechte šířku 300 pixelů, bez ohledu na to množství vycpávky:

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

Zkuste to sami →

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

Další příklady

Nastavte levé polstrování

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

Tento příklad ukazuje, jak nastavit levé odsazení prvku <p>.

Nastavte správnou výplň

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

Tento příklad ukazuje, jak nastavit správné odsazení prvku <p>.

Nastavte horní polstrování

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

Tento příklad ukazuje, jak nastavit horní odsazení prvku <p>.

Nastavte spodní polstrování

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

Tento příklad ukazuje, jak nastavit spodní odsazení prvku <p>.

Všechny vlastnosti odsazení CSS

padding: Zkrácená vlastnost pro nastavení všech vlastností výplně v jedné deklaraci
padding-bottom: Nastavuje spodní výplň prvku
padding-left: Nastaví levé odsazení prvku
padding-right: Nastaví správné odsazení prvku
padding-top: Nastavuje horní odsazení prvku