Почему заполнение не применяется внутри при использовании рамки

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; до дивов, но по какой-то причине 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
}