How to set Background color with subDiv that has margin

Issue

I'm just wondering why I can't set background for whole my div with a subDiv that has a margin just like that

HTML

import "./styles.css";

export default function App() {


  return (
    <div className="App">
      <div className="contain">
        
      </div>
    </div>
  );
}

CSS

.App {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: rgb(247, 159, 159);
}
.App .contain {
  position: relative;
  margin: 80px 0;
}

It just colors that subDiv and the top and bottom space is still white:

Solution

It is because your 'App' div is empty. You do not have anything inside. If you put a whitespace character or text inside it will work. If you do not want a &nbsp inside you can also change the margin of the 'contain' to padding.

Solution 1 - Take care of &nbsp as some fonts can add a custom height here:

<div class="App">&nbsp;
  <div class="contain">
    
  </div>
</div>

Solution 2:

.App .contain {
  position: relative;
  padding: 80px 0;
}

Check out the example: https://jsfiddle.net/h9vz2gmd/1/

Answered By - nosTa