Simple React component causes irregular margin issues

Question

I have 3 components: (1) App, (2) Main and (3) Card. The Main component is in the App Component. The Card component is in the Main Component. Here's a runnable example of it:

// Card.js
function Card(props) {
    return <div className="card">
        {props.children}
    </div>
}

// Main.js
/*export*/ function Main() {
    return <div className="main">
        <Card></Card>
    </div>
}

// App.js
function App() {
  return <div>
    <Main></Main>
  </div>
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

/* index.css*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Card.css */
.card {
    background: darkslategrey;
    margin: 20% auto;
    height: 100px;
    width: 600px;
    border-radius: 10px;
}

/* Main.css */
.main {
    background: blanchedalmond;
    height: 100vh;
    width: 100vw;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

Index.js has -> App has -> Main. Main has -> Card.

My App Component has no styles. My Main Component has a few lines which includes colors, height and width. My Card Component has a few styles - border-radius, color, margin and so on. Simple styles.

The problem is, everything works fine until I add margin to my Card. Whenever I add margin-top to the Card, the 'root' Component moves down, leaving a chunck of white space on top. I just want my Card to move down.

index.js

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

index.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

App.js

function App() {
  return <div>
    <Main></Main>
  </div>
}

App.css

empty...

Main.js

export function Main() {
    return <div className="main">
        <Card></Card>
    </div>
}

Main.css

.main {
    background: blanchedalmond;
    height: 100vh;
    width: 100vw;
}

Card.js

function Card(props) {
    return <div className="card">
        {props.children}
    </div>
}

Card.css

.card {
    background: darkslategrey;
    margin: 20% auto;
    height: 100px;
    width: 600px;
    border-radius: 10px;
}

Output is this:

@T.J.Crowder you are correct, posted with a solution. – Tushar Gupta Mar 12 '22 at 14:21 — Tushar Gupta, Mar 12 '22 at 14:21
Thanks @Tushar - I was *fairly* sure, but... :-D – T.J. Crowder Mar 12 '22 at 14:22 — T.J. Crowder, Mar 12 '22 at 14:22

Tushar Gupta · Accepted Answer · 2022-03-12T14:18:26.963

1

It is happening due to the margin-collapsing. To fix it, you can set display: flow-root on the main div. Learn about flow-root

Issue reproduce :

.card {
  background: grey;
  margin: 20% auto;
  height: 100px;
  width: 600px;
  border-radius: 10px;
}

.main {
  background: red;
  height: 100vh;
  width: 100vw;
 
}

<div>
  <div class="main">
    <div class="card">
      sdasd
    </div>
  </div>
</div>

Issue Fix with display: flow-root

.card {
  background: grey;
  margin: 20% auto;
  height: 100px;
  width: 600px;
  border-radius: 10px;
}

.main {
  background: red;
  height: 100vh;
  width: 100vw;
  display: flow-root
}

<div>
  <div class="main">
    <div class="card">
      sdasd
    </div>
  </div>
</div>

PS: display: flow-root is not supported on IE 11 or lower, if you want to support IE, then you can add a transparent border to the main div like border: 1px solid transparent; instead of display: flow-root

edited Mar 12 '22 at 14:18

answered Mar 12 '22 at 14:13

Tushar Gupta

15,504
1
29
47

Isn't there a good dupetarget for this? (I'm not that active in the CSS tag, but if even I've heard of it...) Like [this one](https://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element). – T.J. Crowder Mar 12 '22 at 14:22
@Tushar that worked! Thannks ;) – Haseeb Mar 12 '22 at 14:25
\yes my bad, should have searched, but I will keep my answer as is, @Haseeb if it helped, can you please accept? – Tushar Gupta Mar 12 '22 at 14:27
@Tushar it did fix the problem. Thanks again. Accepted. – Haseeb Mar 12 '22 at 14:29
oh I cant see it accepted thats why I have asked :) – Tushar Gupta Mar 12 '22 at 14:31
@Tushar haha my bad. Apologies. Done. – Haseeb Mar 12 '22 at 14:45

score 0 · Answer 2 · answered Mar 12 '22 at 14:17

0

margin: 20% auto; in the .card is causing the issue, try using padding.

answered Mar 12 '22 at 14:17

Vipul Chauhan

31
2

Simple React component causes irregular margin issues

2 Answers2