CSS padding-block egenskap

Föregående sida padding
Nästa sida padding-block-end

Definition och användning

elementets padding-block är det utrymme mellan elementets kant och innehållet i blockriktning, och det är en förkortning för följande egenskaper:

padding-block Egenskapsvärdet kan sättas på olika sätt:

Om padding-block-egenskapen har två värden:

padding-block: 10px 50px;

Inre marginalen vid början är 10px
Inre marginalen vid slut är 50px

Om padding-block-egenskapen har ett värde:

padding-block: 10px;

Inre marginaler vid början och slut är båda 10px

CSS padding-block och padding-inline egenskaper är lika med CSS-egenskapen padding-top,padding-bottom,padding-left och padding-right är mycket lika, men padding-block och padding-inline Egenskapen beror på blockriktning och inline-riktning.

Observera:relaterade CSS-egenskaper writing-mode Definierar blockriktningen. Detta påverkar blocks start- och slutpositioner samt padding-block Resultatet av egenskapen. För engelska sidor är blockriktningen nedåt och inline-riktningen från vänster till höger.

Exempel

Exempel 1

Ställ in inre marginaler för blockriktningens båda sidor:

p {
  padding-block: 35px;
}

Prova själv

Exempel 2

När <div>-elementet writing-mode När egenskapsvärdet är satt till vertical-rl flyttas elementets startposition från toppen till höger och slutpositionen från botten till vänster:

div {
  writing-mode: vertical-rl;
  padding-block: 10px 50px;
}

Prova själv

CSS-syntax

padding-block: auto|value|initial|inherit;

Egenskapsvärde

Värde	Beskrivning
auto	Standardvärde. Elementets standardpadding-block-värde.
length	Specificera padding-block i enheter som px, pt, cm m.m. Negativa värden är inte tillåtna. Se:CSS-enheter.
%	Specificera padding-block som en procentandel av den horisontella storleken på föräldrelementet.
initial	Sätt denna egenskap till dess standardvärde. Se: initial.
inherit	Följ från den överordnade elementets egenskap. Se: inherit.

Tekniska detaljer

Standardvärde:	auto
Arvbarhet:	Nej
Animationsskapande:	Stöd. Se:Animation relaterade egenskaper.
Version:	CSS3
JavaScript-syntax:	object.style.paddingBlock="100px 50px"