Why inline-block have different rendering than inline in firefox?

Question

Friends,

My question is why Firefox adds additional pixel (padding) below the box if I use display: inline-block?

Let's see what we have here: http://jsfiddle.net/xbU5s/9/

HTML - Two perfectly same elements.

<div class="wrap">
    <section class="ib">Hello world</section>
    <section class="il">Hello world</section>
</div>

CSS - Everything is the same, but our first section is inline-block and second one is inline.

.wrap { font-size: 0; }

.ib { display: inline-block; }
.il { display: inline; margin-left: 10px; }

section {
    background: #000; border-radius: 3px; color: #fff; font-size: 11px; font-family: Sans-serif;
    padding: 3px 5px; 
}

And here's our 1px padding:

display: inline-block; vs display: inline;

Is is just rendering glitch (cause it's only happens in firefox) or I'm misinformed about inline-block's behavior?

Actually this also happens in Chrome (I use 36.0). And the height is 20px for ib, while 18px for il. — mrmoment, Jul 31 '14 at 08:13
possible duplicate of [What is the difference between display: inline and display: inline-block?](http://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block) — Gunaseelan, Jul 31 '14 at 08:16
I cannot replicate this on the latest Chrome (windows), both are 20px for me. — speak, Jul 31 '14 at 08:16
@MarmiK Hey, I don't quite understand what do you want. I have this 'glitch' in jsfiddle that i've posted. — DADE, Jul 31 '14 at 09:08
@mrmoment That's strange, it's perfectly similar to me in Chrome 36.0 (20px height) and in Canary 38.0 — DADE, Jul 31 '14 at 09:10
@speak there is nothing wrong with Chrome, problem is Firefox. — DADE, Jul 31 '14 at 09:11
@DADE please check my answer below, in chrome also you will find the same behaviour once you will zoom in the fiddle ;) — MarmiK, Jul 31 '14 at 09:20

score 4 · Accepted Answer · edited May 23 '17 at 12:30

Perhaps the answer is already explained here in old post

I will like to clear the difference..

If the element is with style display:inline the style restricts the object in line-height.

But, when block comes with inline the behavior of the same changes.

It is inline but with block it will expand to the possible height or width available.

For a change. select the text in both the box, you will see the second box is selecting out of the box. that is overflow of line-height which is restricted by inline but with inline-block it will grow with overflow caused by padding + line-height

I think this will clear most of the doubts, please refer the old post for more details.

Why inline-block have different rendering than inline in firefox?

1 Answers1