Position fixed doesn't apply margin?

Question

I want a box that has margin. But position fixed don't seems to contain in my App class?

   <div className="App">
      <div className="box">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      </div>
    </div>


.box {
  position: fixed;
  background: red;
  width: 100%;
  box-sizing: border-box;
  height: 100%;
}

https://codesandbox.io/s/affectionate-benz-93zp3z?file=/src/App.js

is there any other way to achieve full screen with margin except with fixed?

score 0 · Answer 1 · answered Apr 14 '22 at 01:51

0

I'm struggling to understand your question, but it appears as if you're struggling with applying a margin to your .box. You can not apply a margin to a fixed element. Source: Why isn't my margin working with position: fixed?

answered Apr 14 '22 at 01:51

Harley Swift

172
1
11

forget about position: fixed; how do you fill the entire page with margin? – Fay Chen Apr 14 '22 at 02:13
I'm not sure why you would want to do this, but you can probably do it by creating 1px element then applying a 100vh and 100vw margin to it. – Harley Swift Apr 14 '22 at 02:18

Position fixed doesn't apply margin?

1 Answers1