Propriété CSS padding-block

Page précédente padding
Page suivante padding-block-end

Définition et utilisation

élément padding-block C'est l'espace entre la bordure et le contenu en direction de bloc, il est l'abréviation des propriétés suivantes :

padding-block Les valeurs de l'attribut peuvent être définies de différentes manières :

Les valeurs de l'attribut peuvent être définies de différentes manières :

padding-block: 10px 50px;

Si l'attribut padding-block a deux valeurs :
La marge interne de début est de 10px

La marge interne de fin est de 50px

Si l'attribut padding-block a une valeur :

padding-block: 10px;

Les marges internes de début et de fin sont toutes deux de 10px padding-block et padding-inline CSS Les attributs sont similaires, maispadding-bottompadding-toppadding-bottom, et padding-left padding-right padding-block et padding-inline L'attribut dépend de la direction en bloc et de la direction en ligne.

Attention :les propriétés CSS associées writing-mode Définit la direction en bloc. Cela affecte la position de départ et de fin du bloc ainsi que padding-block Le résultat de l'attribut. Pour une page en anglais, la direction en bloc est vers le bas et la direction en ligne est de gauche à droite.

Exemple

Exemple 1

Définir les marges internes des deux côtés de la direction en bloc :

p {
  padding-block: 35px;
}

Essayez-le vous-même

Exemple 2

Lorsque l'élément <div> a writing-mode Lorsque la valeur de l'attribut writing-mode est vertical-rl, la position de départ de l'élément est déplacée vers la droite depuis le haut et la position de fin est déplacée vers la gauche depuis le bas :

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur	Description
auto	Valeur par défaut. Valeur par défaut de la marge bloquante de l'élément.
length	Définir la marge bloquante en unités comme px, pt, cm, etc. Les valeurs négatives ne sont pas autorisées. Voir :Unités CSS.
%	Définit la marge bloquante en pourcentage de la taille de l'élément parent dans la direction en ligne.
initial	Définit cette propriété à sa valeur par défaut. Voir initial.
inherit	Inherits this property from its parent element. Voir inherit.

Détails techniques

Valeur par défaut :	auto
Héritabilité :	Non
Réalisation des animations :	Prise en charge. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.paddingBlock="100px 50px"