The inset-block-start
CSS property defines the logical block start offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. It corresponds to the top
, right
, bottom
, or left
property depending on the values defined for writing-mode
, direction
, and text-orientation
.
/* <length> values */ inset-block-start: 3px; inset-block-start: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-block-start: 10%; /* Keyword value */ inset-block-start: auto; /* Global values */ inset-block-start: inherit; inset-block-start: initial; inset-block-start: unset;
Syntax
Values
The inset-block-start
property takes the same values as the left
property.
Formal definition
Initial value | auto
|
Applies to | positioned elements |
Inherited | no |
Percentages | logical-height of containing block |
Computed value | same as box offsets: top , right , bottom , left properties except that directions are logical
|
Animation type | a length, percentage or calc(); |
Formal syntax
<'top'>
Examples
Setting block start offset
HTML
<div>
<p class="exampleText">Example text</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-lr;
position: relative;
inset-block-start: 20px;
background-color: #c8c800;
}
Specifications
Specification | Status | Comment |
---|---|---|
CSS Logical Properties and Values Level 1The definition of 'inset-block-start' in that specification. | Editor's Draft | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
inset-block-start
|
Chrome Full support 69 Full support 69 Disabled' From version 69: this feature is behind the |
Edge Full support 79 Full support 79 Disabled' From version 79: this feature is behind the |
Firefox Full support 63 Full support 63 No support 41 — 63 Alternate Name' Uses the non-standard name: Disabled' From version 38 until version 51 (exclusive): this feature is behind the |
IE
No support No |
Opera Full support 56 Full support 56 Disabled' From version 56: this feature is behind the |
Safari
No support No |
WebView Android
No support No |
Chrome Android Full support 69 Full support 69 Disabled' From version 69: this feature is behind the |
Firefox Android Full support 63 Full support 63 No support 41 — 63 Alternate Name' Uses the non-standard name: Disabled' From version 38 until version 51 (exclusive): this feature is behind the |
Opera Android Full support 48 Full support 48 Disabled' From version 48: this feature is behind the |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- No support
- No support
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
- Uses a non-standard name.'
- Uses a non-standard name.
See also
- The properties which defines other insets:
inset-block-end
,inset-inline-start
, andinset-inline-end
- The mapped physical properties:
top
,right
,bottom
, andleft
writing-mode
,direction
,text-orientation
inset-block-start by Mozilla Contributors is licensed under CC-BY-SA 2.5.