Почуму внутрь блока не умещаются в ряд блоки шириной 33,33%?

Question

<div class="wrapper">
    <div class="inner" style="border: 1px solid; display:inline-block; height:30px; width:33.33%"></div>
    <div class="inner" style="border: 1px solid; display:inline-block; height:30px; width:33.33%"></div>
    <div class="inner" style="border: 1px solid; display:inline-block; height:30px; width:33.33%"></div>
</div>

Cделаем у body

body{
    border: 0;
    padding: 0;
    margin: 0;
    position: relative;
}

И все-равно не умещаются! Сделаем блокам border: 0;, сделаем без .wrapper – опять не умещаются. Здесь что-то неправильно.

Как расположить 3 блока во всю ширину с шириной каждого 33,33%?

Answer 1

Во-первых, когда элементы строчные или строчно-блочные, то перенос в разметке считается за пробельный символ и тоже имеет свой размер. У Вас таких переносов два, поэтому задаём для родителя нулевой размер шрифта, а потомкам возвращаем нужный. Почитать подробнее можно здесь.
Во-вторых, без указания box-sizing: border-box;, все размеры border плюсуются к размерам блока, что тоже не способствует расположению "впритирку".

body { margin: 0; }
.wrapper { font-size: 0; }
.inner { font-size: 16px; box-sizing: border-box; }

<div class="wrapper">
  <div class="inner" style="border: 1px solid; display:inline-block; height:30px; width:33.33%"></div>
  <div class="inner" style="border: 1px solid; display:inline-block; height:30px; width:33.33%"></div>
  <div class="inner" style="border: 1px solid; display:inline-block; height:30px; width:33.33%"></div>
</div>

БЛОГ НА HUSL

Почуму внутрь блока не умещаются в ряд блоки шириной 33,33%?

Ответы (1 шт):