Коллапс поля на элементах встроенного блока?

Поля элементов блоков разрушаются, но не встроенные блоки.
Есть ли способ принудительно свернуть краны встроенных блоков?

.wrapper {
    position: relative;
    float: left;
    width: 100px;
    margin: 10px;
}

.wrapper .el {
    display: inline-block;
    width: 100%;
    height: 20px;
    background: #000;
    margin: 10px 0;
}

.wrapper.block .el { display: block; }

<div class="wrapper">
    <div class="el"></div>
    <div class="el"></div>
    <div class="el"></div>
</div>

<div class="wrapper block">
    <div class="el"></div>
    <div class="el"></div>
    <div class="el"></div>
</div>

Ответы

Ответ 1

В спецификации указано, что поля элементов встроенного блока не сворачиваются:

8.3.1 Свертывание полей

Поля между полем с плавающей точкой и любым другим полем не сворачиваются (даже между поплавком и дочерними потоками).

Поля элементов, которые создают новые контексты форматирования блоков (такие как float и элементы с "переполнением", кроме "видимых" ), не разрушаться со своими детьми в потоке.

Поля абсолютно помещенных коробок не рушится (даже с их детьми в потоке).

Поля полей inline-block не сворачиваются (даже с их дочерьми в потоке).

...

Следовательно, ответ No. Вероятно, вам нужно изменить поля элемента.

Ответ 2

Ответ "нет", потому что это не то, как работают встроенные ящики, поэтому он не может быть принудительным, как вы просили. Все остальное будет просто манипулировать полями элементов, которые являются лишь трюком или взломом.

Ответ 3

Если вы правильно поняли, вы хотите удалить дополнительный запас, который inline-block элементы присваивают font-size: 0; родительскому элементу соответствующего div.

Отметьте это сообщение:

http://css-tricks.com/fighting-the-space-between-inline-block-elements/