1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
---
title: padding-block-end
slug: Web/CSS/padding-block-end
tags:
- CSS
- Experimental
- Propriété
- Reference
translation_of: Web/CSS/padding-block-end
---
{{CSSRef}}{{SeeCompatTable}}
La propriété **`padding-block-end`** définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.
Elle est à rapprocher des propriétés {{cssxref("padding-block-start")}}, {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}} qui définissent les autres écarts de remplissage logiques d'un élément.
{{EmbedInteractiveExample("pages/css/padding-block-end.html")}}
## Syntaxe
```css
/* Valeurs de longueur */
/* Type <length> */
padding-block-end: 10px;
padding-block-end: 1em;
/* Valeurs de proportions */
/* Type <percentage> */
padding-block-end: 5%; /* Relatif à la largeur du bloc englobant */
/* Valeurs globales */
padding-block-end: inherit;
padding-block-end: initial;
padding-block-end: unset;
```
### Valeurs
La propriété `padding-block-end` peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.
### Syntaxe formelle
{{csssyntax}}
## Exemples
### HTML
```html
<div>
<p class="exemple">Texte d'exemple et Lorem et IP sum</p>
</div>
```
### CSS
```css
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exemple {
writing-mode: vertical-lr;
padding-block-end: 20px;
background-color: #C8C800;
}
```
### Résultat
{{EmbedLiveSample("Exemples", 140, 140)}}
## Spécifications
| Spécification | État | Commentaires |
| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------- |
| {{SpecName("CSS Logical Properties", "#propdef-padding-block-end", "padding-block-end")}} | {{Spec2("CSS Logical Properties")}} | Définition initiale. |
{{cssinfo}}
## Compatibilité des navigateurs
{{Compat("css.properties.padding-block-end")}}
## Voir aussi
- Les propriétés physiques correspondantes :
- {{cssxref("padding-top")}},
- {{cssxref("padding-right")}},
- {{cssxref("padding-bottom")}},
- {{cssxref("padding-left")}}
- {{cssxref("writing-mode")}},
- {{cssxref("direction")}},
- {{cssxref("text-orientation")}}
|
