Summary
The padding-inline-end
CSS property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. It corresponds to the {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, or {{cssxref("padding-left")}} property depending on the values defined for {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.
It relates to {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, and {{cssxref("padding-inline-start")}}, which define the other paddings of the element.
{{cssinfo}}
Syntax
/* <length> values */ padding-inline-end: 10px; /* An absolute length */ padding-inline-end: 1em; /* A length relative to the text size */ /* <percentage> value */ padding-inline-end: 5%; /* A padding relative to the block container's width */ /* Global values */ padding-inline-end: inherit; padding-inline-end: initial; padding-inline-end: unset;
Values
The padding-inline-end
property takes the same values as the {{cssxref("padding-left")}} property.
Formal syntax
{{csssyntax}}
Example
HTML Content
<div> <p class="exampleText">Example text</p> </div>
CSS Content
div { background-color: yellow; width: 120px; height: 120px; } .exampleText { writing-mode: vertical-lr; padding-inline-end: 20px; background-color: #C8C800; }
{{EmbedLiveSample("Example", 140, 140)}}
Specification
Specification | Status | Comment |
---|---|---|
{{SpecName("CSS Logical Properties", "#propdef-padding-inline-end", "padding-inline-end")}} | {{Spec2("CSS Logical Properties")}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{CompatNo}}[3] | {{CompatGeckoDesktop("41.0")}}[1][2] | {{CompatNo}} | {{CompatNo}} | {{CompatNo}}[3] |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatGeckoMobile("41.0") }}[1][2] | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
[1] Available since Gecko 38, but behind the preference layout.css.vertical-text.enabled
, then disabled by default.
[2] From Firefox 3, Gecko supports the prefixed -moz-padding-end
.
[3] From Chrome 2 and Safari 3, the similar prefixed -webkit-padding-end
are supported.
See also
- The mapped physical properties: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, and {{cssxref("padding-left")}}
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}