84 replies

inset behaviour

Hey, I have a

position: fixed;

position: fixed;

header and a

.wrapper

.wrapper

class for this example. I wanted to center the header on the page with the

inset

inset

property (top, bottom, left, right works too). However when i use

inset: 1em auto 0 auto;

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

inset: 1em 0 auto 0

which doesn't make sense to me. the

1em

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

instead of

auto

auto

but that stretches it for some reason which also confuses me.

That only works if the

.wrapper

.wrapper

class is directly applied to the header. If it's wrapped in it my

flex

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

CodePenR

inset behaviour

...

KP-C

Kevin Powell - Community•16mo ago•

84 replies

snxxwyy

inset behaviour

Hey, I have a

position: fixed;

position: fixed;

header and a

.wrapper

.wrapper

class for this example. I wanted to center the header on the page with the

inset

inset

property (top, bottom, left, right works too). However when i use

inset: 1em auto 0 auto;

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

inset: 1em 0 auto 0

which doesn't make sense to me. the

1em

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

instead of

auto

auto

but that stretches it for some reason which also confuses me.

That only works if the

.wrapper

.wrapper

class is directly applied to the header. If it's wrapped in it my

flex

flex

CodePenR

inset behaviour

...

inset behaviour

Similar Threads

inset behaviour

Similar Threads

Similar Threads

Similar Threads