Flexbox 容器不包括 margin-bottom

Question

我刚刚开始学习 flexbox 布局并实现了一个示例，但是当我将 margin 20px 设置为我的 flexbox 容器时卡住了。顶部、左侧和右侧边距按预期工作，但我不知道底部边距没有意外设置。

我已将容器的高度设置为 100%，它采用父级（主体元素）的高度，也是 100%。

虽然当我将填充设置为 20px 到我的身体并从容器中删除 20px 边距时它工作正常。

只是想知道这种行为。

为什么边距在这里不起作用而不是填充？

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  background: #011627;
  height: 100%;
}

.container {
  margin: 20px;
  border: solid 2px #f9f871;
}

.container > div:nth-child(odd) {
  padding: 10px;
  background: #ff6a67;
}

.container > div:nth-child(even) {
  padding: 10px;
  background: #007277;
  color: azure;
}

/* overwrite css */
.container {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

 <div class="container">
    <div class="home">Home</div>
    <div class="search">Search</div>
    <div class="view">View</div>
    <div class="logout">Logout</div>
  </div>

Answer 1

box-sizing 属性不包括计算边距：

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

box-sizing CSS 属性设置如何计算元素的总宽度和高度。

你可以把外边距变成父级的内边距

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

html,
body {
  background: #011627;
  height: 100%;
}

body {
  padding: 20px;
}

.container {
  /* margin: 20px; */
  border: solid 2px #f9f871;
}

.container>div:nth-child(odd) {
  padding: 10px;
  background: #ff6a67;
}

.container>div:nth-child(even) {
  padding: 10px;
  background: #007277;
  color: azure;
}


/* overwrite css */

.container {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="home">Home</div>
  <div class="search">Search</div>
  <div class="view">View</div>
  <div class="logout">Logout</div>
</div>

或使用calc()将其从父级的高度移除

https://developer.mozilla.org/en-US/docs/Web/CSS/calc()

calc() CSS 函数允许您在指定 CSS 属性值时执行计算。它可以在任何允许使用<length>, <frequency>, <angle>, <time>, <percentage>, <number> 或<integer> 的地方使用。

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

html,
body {
  background: #011627;
  height: 100%;
}

body {
  height:calc( 100% - 40px );
}

.container {
  margin: 20px;
  border: solid 2px #f9f871;
}

.container>div:nth-child(odd) {
  padding: 10px;
  background: #ff6a67;
}

.container>div:nth-child(even) {
  padding: 10px;
  background: #007277;
  color: azure;
}


/* overwrite css */

.container {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="home">Home</div>
  <div class="search">Search</div>
  <div class="view">View</div>
  <div class="logout">Logout</div>
</div>

由于body 和html 都设置了height:100%，您将看不到下面的空白区域。您可以为body 指定高度，仅允许html 滚动。

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

html,
body {
  background: #011627;
}

body {
  height:100vh;
}

.container {
  margin: 20px;
  border: solid 2px #f9f871;
}

.container>div:nth-child(odd) {
  padding: 10px;
  background: #ff6a67;
}

.container>div:nth-child(even) {
  padding: 10px;
  background: #007277;
  color: azure;
}


/* overwrite css */

.container {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="home">Home</div>
  <div class="search">Search</div>
  <div class="view">View</div>
  <div class="logout">Logout</div>
</div>