inset-block
A logical shorthand for 'inset-block-start' and 'inset-block-end'. It defines an element's distance from the top and bottom of its container in one line.
It is documented as part of the CSS Logical Properties and Values, CSS Positioned Layout specification.
Syntax
/* Usage Example */
.full-height-overlay {
position: absolute;
/* Stretches from top to bottom logically */
inset-block: 0;
inset-inline: 40px;
}
/* Syntax */
inset-block: top;
/* Global values */
inset-block: inherit;
inset-block: initial;
inset-block: revert;
inset-block: revert-layer;
inset-block: unset;inset-block Browser support
Widely available
Since
2021 95% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2021.
87+
63+
14.1+
87+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more