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/BaXbqpP
40 Replies
b1mind
b1mind3w ago
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?
snxxwyy
snxxwyyOP3w ago
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?
b1mind
b1mind3w ago
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 >.>;;
snxxwyy
snxxwyyOP3w ago
Oh? That’s weird
b1mind
b1mind3w ago
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
snxxwyy
snxxwyyOP3w ago
Haha 😅, I’ll give that a shot then Ah okay I’ll keep that in mind, thanks
b1mind
b1mind3w ago
oh no in your pen it is wtf
snxxwyy
snxxwyyOP3w ago
I looked on mdn and it says inset it for ‘top, right, bottom, and/or left values’, do you think that’s why?
b1mind
b1mind3w ago
na I was wrong just in the example I was working with it didn't see to show it
snxxwyy
snxxwyyOP3w ago
Ohh okay no worries
b1mind
b1mind3w ago
No description
b1mind
b1mind3w ago
you pen does
snxxwyy
snxxwyyOP3w ago
Thats good haha, would have been very confusing if not
b1mind
b1mind3w ago
Oh I know why the playground on mdn stripped it cause it does not need to be there if its blank its auto 🤷‍♂️
snxxwyy
snxxwyyOP3w ago
that’s a fun way for mdn to confuse people lol
b1mind
b1mind3w ago
it would resolve as left/right auto or left auto right auto either way 🤔 idk thats mdns playground for ya 😂
snxxwyy
snxxwyyOP3w ago
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
b1mind
b1mind3w ago
I'm confused why auto left right isn't centering
snxxwyy
snxxwyyOP3w ago
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
b1mind
b1mind3w ago
I mean flex just changes the children not really it self inset like breaks the children they don't know wtf
snxxwyy
snxxwyyOP3w ago
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 😅
b1mind
b1mind3w ago
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.
snxxwyy
snxxwyyOP3w ago
Hm that’s strange, why does inset break the width?
b1mind
b1mind3w ago
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#auto
b1mind
b1mind3w ago
Mojtaba 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
b1mind
b1mind3w ago
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 👋
snxxwyy
snxxwyyOP3w ago
Ah okay so auto represents nothing in the case of inset?
b1mind
b1mind3w ago
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)
snxxwyy
snxxwyyOP3w ago
I’ll give that a shot in a little bit. I appreciate your help Ohh okay I see
b1mind
b1mind3w ago
So that will depend on if its relative or absolute in your case fixed === absolute
snxxwyy
snxxwyyOP3w ago
Grid will depend on it?
b1mind
b1mind3w ago
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
snxxwyy
snxxwyyOP3w ago
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
b1mind
b1mind3w ago
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)
snxxwyy
snxxwyyOP3w ago
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?
b1mind
b1mind3w ago
yup exactly #justUseGrid 🤢
snxxwyy
snxxwyyOP3w ago
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
b1mind
b1mind3w ago
grid is the best centering tool period best layering tool too imo you can fill, align, justify your hearts content
clevermissfox
clevermissfox3w ago
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).
Want results from more Discord servers?
Add your server