Форматирование div внутри контейнера div

Question

Я сделал простой пример, чтобы проверить это. У меня есть одна оболочка div с двумя другими элементами div внутри, установленными на display: inline-block;. Два внутренних элемента div находятся на одной линии, но как мне расположить их по центру на половине основного div, к которому они принадлежат? Например, синее поле в середине левой стороны основного div и красное поле в середине правой стороны основного div. Код и скриншот ниже.

Also, the inspector shows a width of 204px for the main-box div and even when I set padding and margin to 0 there's still a gap on the bottom between the blue/red boxes and the border of the main-box. How do I get rid of the gap?

.box-test {
  height: 200px;
  display: inline-block;
  width: 30%;
  box-sizing: border-box;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#main-box {
  text-align: center;
  border: 1px solid black;
}

<div id="main-box">
  <div id="blue" class="box-test"></div>
  <div id="red" class="box-test"></div>
</div>

Answer 1

#main-box {
  text-align: center;
  border: 1px solid black;
  font-size:0;
}

Почему это так? Пожалуйста, прочитайте это:

https://css -tricks.com / борьба-заместитель пространственно-между-инлайн-блок-элементы /

Удаление пробелов между элементами HTML при использовании переносов строк

https://jsfiddle.net/evzckd3w/

Answer 2

То, что вы должны использовать, это flexbox для обертки. При определении space-around для «горизонтального выравнивания» вы получите то, что хотите.

Подробнее о flexbox см. здесь

* {
  box-sizing: border-box;
}

#main-box {
  border: 1px solid black;
  display: flex;
  justify-content: space-around;
}
.box-test {
  height: 200px;
  width: 30%;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

<div id="main-box">
  <div id="blue" class="box-test"></div>
  <div id="red" class="box-test"></div>
</div>

Answer 3

Вы можете использовать flexbox со свойством justify-content: space-around в оболочке.

.box-test {
  height: 200px;
  width: 30%;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#main-box {
  display: flex;
  justify-content: space-around;
  border: 1px solid black;
}

<div id="main-box">
  <div id="blue" class="box-test"></div>
  <div id="red" class="box-test"></div>
</div>

Answer 4

Используйте flexbox и margin:auto на обоих элементах, и они будут центрированы так, как вы хотите, и вы также избавитесь от всех проблем с пробелами:

.box-test {
  height: 200px;
  margin:auto;
  width: 30%;
  box-sizing: border-box;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#main-box {
  border: 1px solid black;
  display:flex;
}

<div id="main-box">
  <div id="blue" class="box-test"></div>
  <div id="red" class="box-test"></div>
</div>