Downside of inline-block

Question

Imagine h1 is inside a div:

Compare two styles: What is the problem with inline-block?

h1 {
  display: block;
  Width: 150px;
  margin: 0 auto
}

h1 {
  display: inline-block;
  Width: 150px;
  margin: 0 auto
}

`margin: 0 auto` trick works only for `display:block`, which will center the `h1` horizontally. — King King, May 07 '14 at 06:08
worth to note `inline-block` is buggy in old IE browsers, esp. IE7 — Raptor, May 07 '14 at 06:12

BoltClock · Answer 1 · 2014-05-07T06:16:15.753

2

As their name implies, inline-blocks are laid inline. Auto margins have no effect on inline and inline-block boxes.

This isn't a "downside" or a "problem" with inline-blocks per se; it's just how inline formatting works. There is little reason to use an inline-block for anything other than putting a block container on a line box.

edited May 07 '14 at 06:16

answered May 07 '14 at 06:10

BoltClock

700,868
160
1,392
1,356

score 0 · Answer 2 · answered May 07 '14 at 06:14

0

You could wrap inline-block styles around a block. That way you still get to control margins.

.wraper { display: block; margin: 0 auto; }
.content { display: inline-block }
<div class="wrapper"><h1></h1></div>

You may add as many inline blocks and will just work.

answered May 07 '14 at 06:14

beautifulcoder

10,832
3
19
29

Doen't Work or maybe i'm unable to use it. – Sir Meysam Ferguson May 07 '14 at 06:37

score 0 · Answer 3 · answered Jun 14 '17 at 14:43

Well...a bit late, but still useful, I hope.

First of all: a visual example is here on the Jsfiddle.

Remember that "headings" are block-level elements (see MDN), so the display:block; is somewhat "implicit".

When you add the display:inline-block;, you are in fact removing the "block-level" element status thus making it behave differently: in your specific case, margin: 0 auto means 0-pixels margins on top and bottom, while 0-pixels margin on the left and "whatever it is" on the right. Just like any text on your page. So, you could add something after the <h1> tag, to have it show up inline (of course) with the heading (see JSFiddle example).

On a display:block; element, on the contrary, the left and right margins would be calculated so that the element remains on the center of the parent.

Downside of inline-block

3 Answers3