This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović
It’s time to get me up on speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.
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.
This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-10-06T09:38:54+00:00) Day 9: the inset shorthand property. Retrieved from https://www.scien.cx/2022/10/06/day-9-the-inset-shorthand-property/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.