inset behaviour
Hey, I have a
position: fixed; header and a .wrapper class for this example. I wanted to center the header on the page with the inset property (top, bottom, left, right works too). However when i use inset: 1em auto 0 auto; which i assume to have the top, bottom, left and right order, it doesn't work, instead i have to do inset: 1em 0 auto 0 which doesn't make sense to me. the 1em is to space it from the top of the page but since i don't want any space at the bottom i would put 0 instead of auto but that stretches it for some reason which also confuses me.
That only works if the .wrapper class is directly applied to the header. If it's wrapped in it my flex on header doesn't work and the content seems to get really long if you hover over it in dev tools.
I'd appreciate any help explaining this. Thanks in advance.
https://codepen.io/deerCabin/pen/BaXbqpP40 Replies
0 stretches inset 😄
thats all I konw 😂
its basically saying fill
oh but I see what you mean
you are trying to center with it?
If it stretches it that makes sense haha
Yeah I’m trying to center it. I feel you’re going to say grid or something?
inset: 1em auto 0 auto; is not valid though it removes the last auto
dang you know me all too well
cause :yes: use grid
Even if its a pseudo element I'd use grid
>.>;;Oh? That’s weird
Also hot tip use pos: sticky for your header not fixed
sticky will hold its place in the dom
oh your filling it
yea idk I looked at the pen finally and got lost sry
yea I kinda thought so too
but if you look in dev tools its not showing it
Haha 😅, I’ll give that a shot then
Ah okay I’ll keep that in mind, thanks
oh no in your pen it is wtf
I looked on mdn and it says inset it for ‘top, right, bottom, and/or left values’, do you think that’s why?
na I was wrong just in the example I was working with it didn't see to show it
Ohh okay no worries
you pen does
Thats good haha, would have been very confusing if not
Oh I know why the playground on mdn stripped it
cause it does not need to be there if its blank its auto
🤷♂️
that’s a fun way for mdn to confuse people lol
it would resolve as left/right auto or left auto right auto either way 🤔 idk thats mdns playground for ya 😂
So the 0 for bottom makes sense since it stretches it, I assume it’s just filling the viewport space. But the 0 for centring doesn’t make sense to me still. Unless it needs to stretch from left to right for the flex to work. I think that may be it, it’s not full width in dev tools
If I was playing with this in the playground I would be veryyy confused I think lol
I'm confused why auto left right isn't centering
Yeah me too, unless that’s not how you do it in inset?
It has flex applied too so it can’t be that issue either
I mean flex just changes the children not really it self
inset like breaks the children they don't know wtf
I know that auto properties on margin only work in flex/grid containers in some situations, that’s what I meant sorry
Just when I thought I knew how it worked 😅
na I'm just tired lol
someone else with a brain that works needs to chime in.
what it breaks it should which is its width:
but even if you give it a min*-width: the inset: 1em auto 0 auto; still does not keep the left / right even.
Hm that’s strange, why does inset break the width?
because that is how it works, its going to make it dense, then you set the stretch with 0.
honestly that is the only time I've used inset 😂
inset: 0;
yea so auto just does not work like that with inset (not like margin)
cause its just shorthand for top/right/bottom/left.
https://developer.mozilla.org/en-US/docs/Web/CSS/top#autoMojtaba Seyedi
CSS-Tricks
Inset | CSS-Tricks
The inset property in CSS is a shorthand for the four inset properties, top, right, bottom and left in one declaration. Just like the four individual
Again don't fight it... #justUseGrid
jpjp I don't even understand your end goal sorry I'm no help.
💤 I should have slept long ago 👋
Ah okay so auto represents nothing in the case of inset?
it does not move it
So it stays where it would based on the height/bottom of the elment based on where it is (or something)
I’ll give that a shot in a little bit. I appreciate your help
Ohh okay I see
So that will depend on if its relative or absolute
in your case fixed === absolute
Grid will depend on it?
Yea wish I was more help, I'm sure someone big brain will be more accurate 😂 . This was learning for me too honestly, inset is not something I use a lot. I tend to stay away from short hands. (inset: 0; is great though lol)
not sure what you are trying to do still and not to derail this more, try it with grid and make another post xD
You definitely helped clear things up. I assume just using the separate properties will give the same result as inset anyways. I always ask the most niche questions, so I’m not surprised if no one has looked into what I’m asking lol
correct that is why I linked the top: auto from mdn cause it has the actual answer
that was kinda lost on me too 😂
"like duh b .. ofc it won't center it "
you can do the % thing though (worst way to center in CSS imo)
Yeah that’s fair, I think this is one of those really funky properties lol, seems to cause a lot of confusion
The translate thing?
yup exactly #justUseGrid
🤢
Haha, it’s good for like centering dropdown menus though no?
Or you could probably use grid for that too
Anyways, thanks for your help
grid is the best centering tool period
best layering tool too imo
you can fill, align, justify your hearts content
Btw inset goes in order: top right bottom left. Same as margin, padding, and border when they have 4 values.
When it's 3 values it's top, left&right(inline), bottom
When it's 2 values, it's top&bottom(block) and left&right(inline)
You can also use inset-inline and inset-block if that's easier to grasp (or margin-inline/margin-block , padding-inline/padding-block, border-inline/border-block).