Встроенные блоки не помещаются в контейнер

Question

Не уверен, что я делаю не так, я подумал, что, добавив рамку, он будет аккуратно помещаться в эти 4 коробки.

http://jsfiddle.net/jzhang172/x3ftdx6n/

.ok{
width:300px;
    background:red;
    height:100px;
    box-sizing:border-box;
}

.box{
    display:inline-block; 
    box-sizing:border-box;
    width:25%;
    border:2px solid blue;
    height:100%;
}

<div class="ok">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
    
</div>

Answer 1

Проблема в том, что inline-block элементы по умолчанию отображаются с небольшим дополнительным пространством.

Зачем? Потому что div установлен в inline-block имеет некоторые встроенные характеристики элемента.

Пробел или разрыв строки между span элементы приведут к пробелу, представленному браузером.

Точно так же, если вы пишете текст в <p> элемент, каждый раз, когда вы нажимаете пробел или добавляете разрыв строки, пробел будет отображаться браузером.

Это же правило относится к inline-block дивы. Пробел или разрыв строки в источнике приведут к отображению пробела. Это создает неожиданную ширину, которая может привести к переполнению или переносу.

Одним из решений является удаление всех пробелов между элементами в источнике:

.ok {
  width: 300px;
  background: red;
  height: 100px;
  box-sizing: border-box;
}
.box {
  display: inline-block;
  box-sizing: border-box;
  width: 25%;
  border: 2px solid blue;
  height: 100%;
}

<div class="ok"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div></div>

Другой набор методов font-size: 0 на родительском и, при необходимости, восстанавливает шрифт на дочернем:

.ok {
  width: 300px;
  background: red;
  height: 100px;
  box-sizing: border-box;
  font-size: 0;
}
.box {
  display: inline-block;
  box-sizing: border-box;
  width: 25%;
  border: 2px solid blue;
  height: 100%;
  font-size: 16px;
}

<div class="ok">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

Другие варианты включают отрицательные поля, пропуская закрывающие теги, используя теги комментариев, плавающие и flexbox. Смотрите эту статью для более подробной информации:

• Борьба с пространством между встроенными элементами блока

Answer 2

Я бы настоял, чтобы вы добавили только одно свойство. Тот, который удаляет пробелы между box дела. Просто добавь float:left; на ваш .box класс / дел.

Демо: ОБНОВЛЕНО

.ok{
    margin:0px auto; /* ADDED */
    width:300px;
    background:red;
    height:100px;
    box-sizing:border-box;
    padding:0px auto;
}

.box{
    display:inline-block; 
    box-sizing:border-box;
    width:25%;
    border:2px solid blue;
    height:100%;
    float:left;
}

<div class="ok">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
    
</div>

ОБНОВЛЕНИЕ: Чтобы центрировать это, добавьте только еще одно свойство margin:0px auto; на ваш .ok класс / дел. ПРОВЕРЬТЕ ОБНОВЛЕННЫЙ ДЕМО И СНИППЕТ.

Примечание: это сделает ваш текст в box DIV выровнен по левому краю, так что если вы хотите, чтобы он был в центре text-align:center; на ваш .box класс в CSS.