Margin collapse on inline-block elements?

Question

Margins of blocks elements collapse, but not inline-blocks.
Is there a way to force inline-blocks margins to collapse?

.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>

Anyone have an idea?
I have already read the documentation on MDN.

Answer 1

This is documented in the spec that margins of inline-block elements do not collapse:

8.3.1 Collapsing margins

• Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
• Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
• Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).
• Margins of inline-block boxes do not collapse (not even with their in-flow children).
• ...

Therefore the answer is No. You probably need to alter the margins of the element.

Answer 2

The answer is "no" because that's not how inline boxes work so it can't be forced as you asked for. Anything else would be just manipulating the margins of elements which is only a trick or hack.