0

I can't understand this weird behavior. My Body has a height of 100vh, but the page has a scrollbar despite nothing overflowing the body, and when I inspected it, I realized it's because of the margin-top on the App component. But why is the margin on the App component pushing the body down?

Also, why when I add a border on the body, the scrollbar disappears?

body has height: 100vh. App has margin-top: 3rem. .App is pushing the body. enter image description here

When you add border: 3px to Body, scrollbar disappears. enter image description here

Without the border on body, if you remove margin-top on .App component, scrollbar disappears. enter image description here

Can somebody explain what's happening?

happy_story
  • 1
  • 1
  • 7
  • 17
  • 1
    Can you post your source code? – Al.G. May 02 '22 at 16:30
  • @Al.G. It's a React app. Is there a way to post the entire folder full of components, or do you just want to see the App component? The App component has just one child component, and nothing else. How can a margin-top on the App component push down the body? – happy_story May 02 '22 at 18:31
  • By the way, the suggested answer has nothing to do with my question and problem. I am not dealing with collapsing margins. In my case, a margin-top on child element is pushing down the body itself, which makes no sense. – happy_story May 02 '22 at 18:34
  • @Al.G. Here's a jsfiddle https://jsfiddle.net/jdsL34wb/ I removed all the props and functions, and only left the return JSX of the main components. I also included the index css. – happy_story May 02 '22 at 18:37
  • It seems to me the issue is not related to reactjs in any way. You can share just the html+css so we can reproduce the problem (for which you've shown a screenshot) and find a solution more easily. – Al.G. May 02 '22 at 20:41
  • I guess it will be easiest for you if you just copied the DOM from the webtools window (right click on the `html` element, then "copy outher html"). You can post that here (by stripping irrelevant elements probably). I'm not sure if all styles will be preserved, so you may double-check that the resulting page still reproduces the problem. – Al.G. May 02 '22 at 20:49
  • @Al.G. I did what you asked. Here's the jsfiddle with the outer html: https://jsfiddle.net/4r7m3wvL/ I also checked, and the problem remains. There's a scrollbar right now, but if you remove the margin-top on the `.App` element, the scrollbar disappears. It also disappears if you just add border to the `body`. Do you have any idea why is this happening? I cannot comprehend why would adding margin-top move down the body element. – happy_story May 02 '22 at 22:33
  • I just saw your other question [here](https://stackoverflow.com/q/72098409/3132718), which was better because you directly provided your code in the question as a runnable snippet which eliminates the need for screenshots and additional discussions in the comments section. – Al.G. May 04 '22 at 09:39
  • @Al.G. Hey there, yep, I already figured out the problem. It wasn't just about collapsing margins, it's also about the way the box model works. If the parent element has no content other than the child-element, no padding or borders, then the margin of the child has nothing to `touch`, so that's why the child margin collapses with the parent `body` margin, and both marge into a single margin, which expands outward until it `touches` some content (border or padding). By adding a border, the child `.App` margin touches that border, and pushes down the child, without it, both are pushed down. – happy_story May 04 '22 at 11:57

0 Answers0