This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
The inset property is a shorthand for the top, right, bottom, and/or left properties. It implements the same multi-value syntax like margin.
<div class="parent">
<div class="child">
At bottom right with 20px offset
</div>
</div>.parent {
width: 12rem;
height: 12rem;
position: relative;
}
.child {
position: absolute;
/* top: auto; right: 20px; bottom: 20px; left: auto */
inset: auto 20px 20px auto;
width: 50%;
height: 50%;
}Just like margin, inset does not respect the reading direction. To work around that, use the inset-inline and inset-block shorthands.
.child {
position: absolute;
/* top: auto; bottom: 20px; in ltr */
inset-block: auto 20px;
/* left: auto; right: 20px; in ltr */
inset-inline: auto 20px;
}<div class="parent" dir="rtl">
<div class="child">
At bottom right with 20px offset
</div>
</div>Are these shorthands useful? I don't know. I'll cover some use cases later in the series, but I wasn't able to come up with many scenarios where inset makes things much easier.
My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-10-06T00:00:00+00:00) Day 9: the inset shorthand property. Retrieved from https://www.scien.cx/2022/10/06/day-9-the-inset-shorthand-property-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.