margin-bottom not working on simple layout-CodePudding

Codepen link for demonstration. Layout is very simple, no absolute position or float.

<html>
  <body>
    <main>
      <section></section>
    </main>
  </body>
</html>

*{
  margin: 0px;
  padding: 0px;
}
body {
  height: 100vh;
  width: 100vw;
  overflow:hidden;
  position: relative;
}
main {
  height: 100%;
}
section {
  margin: 0.5rem;
  display: grid;
  height: 100%;
  background-color: grey;
}

I am expecting section to have margin on all sides but bottom margin is not showing. Am I doing anything wrong?

One solution would be to set the height:calc(100% - 0.5rem) on section. But if i do that, what's the point of having margin-bottom style

CodePudding user response：

You can simply implement this with border 0.5rem.

*{
  margin: 0;
  padding: 0;
}

body {
  background: yellow;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
}

main {}

section {  
  box-sizing: border-box;
  width: 100wh;
  height: 100vh;
  border: 0.5rem solid yellow;
  background: gray;  
  background-color: grey;
  padding: 10px;
}

<html>
  <body>
    <main>
      <section>Hello Amit Kumar!</section>
    </main>
  </body>
</html>