Как убрать отступ?

Question

[XenTerSeO]

Есть три блока, с width: 33.333%, но появляется проблема - маленький отступ сбоку.
Каким образом задать ширину, чтобы умещалось 3 блока в ряд, при этом сохраняя резиновую вёрстку?

(box-sizing: border-box)

Answer 1

[display: block]

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

.parent{
  width: 50%;
  margin: 0 auto;
  height: 500px;
  border: 1px solid;
  text-align: center;
}
.child{
  border: 1px inset tomato;
  height: 150px;
  width: 33.333%;
  display:inline-block;
  box-sizing: border-box;
}
.child:last-child{
  float:right;
}
.child:first-child{
  float:left;
}

codepen.io/anon/pen/MKJrOr

Answer 2

[Олег Карнаухов]

Ну например использовать
width: calc( 100% / 3 ) - сразу тебе для класса всех трех блоков
Вообще зачем загоняться и делать % в %?
Сделай 2 блока по 33%, а третий 34% и нет проблем.

Comments

[XenTerSeO]

К сожалению, нужно, чтобы всё было ровно. А width: calc( 100% / 3 ) даёт такой же результат, что и width: 33.333%, хотя и удобнее в использовании в моём случае.

[Олег Карнаухов]

XenTerSeO: Тогда вероятно никак. Я помню тоже была такая проблема. Тут еще проблема вот в чем - у вас родительский блок в 1000 пикселей. Вы не можете его ровно на 3 части поделить. Т.к. пиксель неделим.

Answer 3

[del993788]

Flex