{{CSSRef}}{{SeeCompatTable}}
Summary
The padding-block-start
CSS property defines the logical block start 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-end")}}, {{cssxref("padding-inline-start")}}, and {{cssxref("padding-inline-end")}}, which define the other paddings of the element.
{{cssinfo}}
Syntax
/* <length> values */ padding-block-start: 10px; /* An absolute length */ padding-block-start: 1em; /* A length relative to the text size */ /* <percentage> value */ padding-block-start: 5%; /* A padding relative to the block container's width */ /* Global values */ padding-block-start: inherit; padding-block-start: initial; padding-block-start: unset;
Values
The padding-block-start
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-block-start: 20px; background-color: #C8C800; }
{{EmbedLiveSample("Example", 140, 140)}}
Specification
Specification | Status | Comment |
---|---|---|
{{SpecName("CSS Logical Properties", "#propdef-padding-block-start", "padding-block-start")}} | {{Spec2("CSS Logical Properties")}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatGeckoDesktop("41.0")}}[1] | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatGeckoMobile("41.0")}}[1] | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
[1] Available since Gecko 38, but behind the preference layout.css.vertical-text.enabled
, then disabled by default.
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")}}