css - 为什么在使用边框框时不在内部应用填充

Question

我有一个简单的问题，希望有一个简单的答案。这看起来很基本，但我就是无法理解它。

所以，我在一个容器中排列了四个盒子:

div {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.wrapper {
  box-sizing: content-box;
  height: 600px;
  width: 600px;
  margin: 100px auto;
  border: 2px solid gray;
}

.box-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 300px;
  height: 300px;
  padding: 0px;
}

.c {
  background-color: cyan;
}

.y {
  background-color: yellow;
}

.m {
  background-color: magenta;
}

.k {
  background-color: black;
}

<div class="wrapper">
    <div class="box-container">
        <div class="box c"></div>
        <div class="box y"></div>
        <div class="box m"></div>
        <div class="box k"></div>
    </div>
</div>

我已将 box-sizing: border-box; 应用于 div，但由于某些原因 padding 根本没有效果。如果我使用 margin 那么它会使 div 对于包装器来说太大了，并且它们会移动位置。

我在这里错过了什么？

提前致谢

杰米

Answer 1

您的 HTML 和 CSS 是正确的。如果您需要在所有 .c .m .y .k 框上填充，则使用

.box {
  width: 300px;
  height: 300px;
  padding: 10px;
  border: 10px solid #000; //border also works
}