margin-bottom 不适用于简单布局

Question

Codepen link 用于演示。布局非常简单，没有绝对位置和浮动。

* {
  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;
}

<html>

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

</html>

我希望 section 的所有边都有边距，但未显示底部边距。我做错了什么吗？

一种解决方案是在部分上设置 height: calc(100% - 0.5rem);。但如果我那样做，那么 margin-bottom 风格有什么意义呢？

Answer 1

您可以简单地用 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>

margin-bottom 不适用于简单布局

margin-bottom not working on simple layout

html

css

margin