The CSS shorthand not enough people know about

inset is the shorthand for top, right, bottom, left

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[Ed-gdec]

You're such a top G in CSS 🥰
Learning so much from these shorts.
Thanks

[elska-jo]

I love it when I see little snippets like this during work, and immediately have a place to use it! Awesome as always

[joan-mariacbrooks]

Just learning CSS; these shorts help a lot!

[code.cracking]

Very useful, as always, but we should set a height if we are using auto, plus I found out that auto works only if it's in the first and third property values.
I don't know if you tried :)
Eg Working cases:
auto 2rem auto 2rem.
auto 2rem auto.
2rem 2rem auto.

Non-working cases:
2rem auto 2rem 2rem.
2rem auto .
2rem 1rem 2rem auto.
Meaning you can put auto only for top and bottom.

[CarlosBallena]

I think I'm more impressed by the way you're using it here... It's incredibly simple but effective 🤔

[chrisicotec]

this is extremely useful, thanks Kevin!

[ahmedabousinger]

Thx for the info it will make CSS padding less painful for me

[simoneade]

This is great from the CSS master, but I applied this to a project a while back and not sure all browsers are compatible with the inset as yet

[lewisone]

Wait?? This is like padding/margin, not anything like placement that top, bottom, left, right does??

If you assign a height and width does it work like tblr?

[seekinfox]

in sass i would just create a mixin for that. 😁

[lieQT]

Not supported on a ton of apple devices, be careful

[sageosoro]

I get tired of writing css in general🥴

[codernerd]

Love how your voice sounds a bit annoyed when you say 'yes, it's supported in all mayor browsers'

[amaury_permer]

Whats the difference between this and padding?

[seananderson]

Why is it called inset when it has nothing to do with the inside of the element, inset makes it sound like what padding would do.