Simple React component causes irregular margin issues

March 12, 2022

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:

>Solution :

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