This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
On day 9 I’ve talked about the inset shorthand properties inset, inset-inline, and inset-block. I don’t believe that I will need those often, but inset can come in handy when you want one element to fill another element entirely.
If you have an outer element and an inner element and you want the inner element to fill its parent, you can use absolute positioning and set top, right, bottom, and left to 0.
<div class="outer">
<div class="inner">
</div>
</div>.outer {
border: 10px solid hotpink;
position: relative;
width: 7rem;
height: 7rem;
}
.inner {
background: aqua;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Instead, you could also just set inset to 0.
.inner {
position: absolute;
inset: 0;
background: aqua;
}Of course, this also applies to a fixed positioned element that you want to fill the viewport with.
.inner {
position: fixed;
inset: 0;
background: aqua;
}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-11-30T00:00:00+00:00) Day 48: inset 0. Retrieved from https://www.scien.cx/2022/11/30/day-48-inset-0-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.