Inset property vs top/right/bottom/left
Hey all! Curious about something..
I'm using "inset: calc(some stuff);" and then declaring "left: initial;" because I want to set top, right and bottom to a certain value but leave left unchanged while using position: fixed. Basically a cart drawer with a bit of margin on the sides.
If I use "inset: calc(some stuff) calc(some stuff) calc(some stuff) initial" it doesn't work. Wondering why that is? I always thought shorthands were literaly just a quicker way to write the same exact thing bit it seems to behave differently than using individual properties by themselves.
BTW I've tried this with Arc and Chrome.
3 Replies
initial is not a valid value for the shorthand
you'll probably need auto for your purpose
Universal property values like
inherit, revert, initial etc. can’t be used for individual values in shorthands. However, inset: initial would work for setting all its longhands to their initial values. It is explained here: https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#omitting_propertiesHmm... I just assumed it didn't work for inset values.
This actually makes sense