Что за отступы display: inline?

Question

[kamisarlapsha]

Привет, как исправить отступы при display: inline-block или как по другому расположить элементы друг за другом горизонтально ? (float не подходит) Вся суть проблемы в том, что должны быть расположены 3 элемента в строке, а из за отступов третий не помещается. И в строке получается всего два.

<div class="performance-item">
</div>
<div class="performance-item">
</div>
<div class="performance-item">
</div>

.performance-item {
    padding: 73px 0 0 20px;
    width: calc(100% / 3);
    height: 200px;
    display: inline-block;
}

Answer 1

[Антон Спирин]

Что за отступы display: inline-block?

Тыц

как по другому расположить элементы друг за другом горизонтально ?

Flexbox

Comments

[kamisarlapsha]

Все, разбрался.

-webkit-flex-wrap: wrap-reverse;
     flex-wrap: wrap-reverse;

Answer 2

[Andrej Sharapov]

Попробуйте сверстать на flexbox
Для примера, как работает: jsfiddle.net/o7q3gr0x

Ваши блоки, только уберите цвет.