CSS padding
Výplň se používá k vytvoření prostoru kolem obsahu prvku uvnitř jakýchkoli definovaných hranic.
CSS padding
Vlastnosti CSS paddingse používají ke generování prostoru kolem obsahu 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 určení odsazení pro každou stranu prvku:
padding-toppadding-rightpadding-bottompadding-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;
}
Výplň – těsnopisná vlastnost
Pro zkrácení kódu je možné zadat všechny vlastnosti výplně v jedné vlastnosti.
Vlastnost paddingje zkrácená vlastnost pro následující jednotlivé vlastnosti výplně:
padding-toppadding-rightpadding-bottompadding-left
Funguje to takto:
Pokud má paddingvlastnost čtyři hodnoty:
- odsazení: 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;
}
Pokud má paddingvlastnost tři hodnoty:
- odsazení: 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;
}
Pokud má paddingvlastnost dvě hodnoty:
- odsazení: 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;
}
Pokud má paddingvlastnost jednu hodnotu:
- odsazení: 25px;
- všechny čtyři výplně mají 25 pixelů
Příklad
Použijte zkrácenou vlastnost padding s jednou hodnotou:
div {
padding: 25px;
}
Výplň a šířka prvku
Vlastnost CSS widthurčuje šířku oblasti obsahu prvku. Oblast obsahu je část uvnitř výplně, okraje a okraje prvku ( model krabice ).
Pokud má tedy prvek zadanou šířku, výplň přidaná k tomuto prvku 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ů + 25 pixelů levého odsazení + 25 pixelů pravého odsazení):
div {
width: 300px;
padding: 25px;
}
Chcete-li zachovat šířku 300 pixelů, bez ohledu na množství odsazení, můžete použít
box-sizingvlastnost. To způsobí, že si prvek zachová svou skutečnou šířku; pokud zvětšíte výplň, zmenší se dostupný prostor pro obsah.
Příklad
Pomocí vlastnosti box-sizing ponechte šířku 300 pixelů bez ohledu na množství odsazení:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
Další příklady
Tento příklad ukazuje, jak nastavit levé odsazení prvku <p>.
Tento příklad ukazuje, jak nastavit správné odsazení prvku <p>.
Tento příklad ukazuje, jak nastavit horní odsazení prvku <p>.
Tento příklad ukazuje, jak nastavit spodní výplň prvku <p>.
Všechny vlastnosti odsazení CSS
| Property | Description |
|---|---|
| padding | A shorthand property for setting all the padding properties in one declaration |
| padding-bottom | Sets the bottom padding of an element |
| padding-left | Sets the left padding of an element |
| padding-right | Sets the right padding of an element |
| padding-top | Sets the top padding of an element |