The inset-block-start property is a part of the CSS Box Alignment Module Level 3. It is used to set the position of an element's block-start edge (the edge that is closest to the top of the containing block) relative to the containing block's block-start edge. This property is particularly useful when working with flexbox and grid layouts.
The inset-block-start property can take any valid CSS length, percentage, or keyword value. The keyword values are auto
, stretch
, and unset
.
Here are some examples of how to use the inset-block-start property:
In this example, we will set the inset-block-start
property of a div element to 50 pixels:
div {
inset-block-start: 50px;
}
This will move the block-start edge of the div element 50 pixels from the block-start edge of its containing block.
In this example, we will set the inset-block-start
property of a div element to 25%:
div {
inset-block-start: 25%;
}
This will move the block-start edge of the div element 25% of the height of its containing block from the block-start edge of the containing block.
In this example, we will set the inset-block-start
property of a div element to stretch
:
div {
inset-block-start: stretch;
}
This will stretch the div element to fill the height of its containing block, with its block-start edge aligned with the block-start edge of the containing block.
Here is another example using the auto
keyword value:
div {
inset-block-start: auto;
}
This will position the div element's block-start edge at its default position, which is the start of the containing block.
The unset
keyword value is used to revert the inset-block-start
property to its default value, which is auto
.
The inset-block-start property is a useful tool for positioning elements within flexbox and grid layouts. By setting the position of an element's block-start edge relative to the containing block's block-start edge, we can create more complex and dynamic layouts.