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.

score 44 · Accepted Answer · edited Feb 16 '17 at 16:01

44

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.

edited Feb 16 '17 at 16:01

Simon Arnold

15,849
7
67
85

answered Aug 22 '14 at 22:25

Hashem Qolami

97,268
26
150
164

1

For instance, by a negative `margin-bottom` like so: http://jsfiddle.net/hashem/0bzm5gf3/5/ – Hashem Qolami Aug 22 '14 at 22:32
9

+1 for answering with a credible source that confirm the 'No' answer. – Simon Arnold Aug 23 '14 at 17:19
12

`margin-collapse: collapse;` one day, one day. – TarranJones May 06 '16 at 14:50
4

@TarranJones - maybe by 2040 they will get to it. hopefully `margin-collapse` property will happen before they manage to invent human-level AI. it's a tight race. – vsync Oct 13 '16 at 15:44

score 1 · Answer 2 · answered Aug 22 '14 at 22:09

1

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.

answered Aug 22 '14 at 22:09

Rob

14,746
28
47
65

score -3 · Answer 3 · answered Aug 22 '14 at 21:48

-3

If I get you right you want to remove that extra margin that inline-block elements have assign font-size: 0; to the parent element of the corresponding div.

Check this post:

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

answered Aug 22 '14 at 21:48

mencina

70
4

Try assigning `font-size: 0;` just to the class `.wrapper`. – mencina Aug 22 '14 at 21:58
Then I think I'm not getting your question. Exactly which of those margins you want to remove? – mencina Aug 22 '14 at 22:01
If you look at the example in the question, you'll notice there is 2 wrapper containers. Both contain elements with the *same* margin even though both doesn't render the same. The only difference is that the first one elements are display: block; and the second one are display: inline-block; – Simon Arnold Aug 22 '14 at 22:10
Got it. I think that's not possible, take a look at this http://www.w3.org/TR/CSS2/box.html. The box model just doesn't work like that. I would try to target those specific margins and tweak them. Good luck! – mencina Aug 22 '14 at 22:18
@mencina might want to consider revising / removing your answer - looks like you were thinking about the 1px margin – Ben Creasy Jul 24 '17 at 18:53
The example has two issues and @mencina solved one of them. The problem is, they didn't ask to solve that issue. [#5078239](https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-block-elements) – Zectbumo Mar 24 '19 at 03:30

Margin collapse on inline-block elements?

3 Answers3

Linked