Why my inline-block divs are not aligned when only one of them has text?

Question

Live page here.

Given this HTML page:

section[role=main] {
  margin: 1em;
  width: 95%;
  border: 1px solid #999;
}

section[role=main] article {
  width: 40%;
  height: 180px;
  margin: 1em;
  display: inline-block;
  border: 1px solid black;
}

<section role="main">
  <article>Java</article>
  <article></article>
</section>

<section role="main">
  <article>Java</article>
  <article>JavaScript</article>
</section>

I expect both of my articles to be aligned, but as it can be seen in the screenshot below, only when both of my articles have text the <article> elements are center aligned:

alignment issue

Any ideas what is causing this behavior and how can it be fixed?

Adding ` ` in the empty article fixes it, but I'm looking into a better solution. — bookcasey, Nov 25 '12 at 04:12
@bookcasey I know, but I am wondering what is causing this behavior in the first place. — TheFooProgrammer, Nov 25 '12 at 04:14

score 62 · Answer 1 · edited May 23 '17 at 12:18

62

Adding:

vertical-align: bottom;

To your second rule should make it work. Apparently, inline-blocks with no text are rendered as inline-images or something else, and the vertical-align of these elements are incorrect, so forcing them to be aligned to bottom fixes the issue.

Source: inline-block element with no text renders differently

edited May 23 '17 at 12:18

Community

1
1

answered Nov 25 '12 at 04:15

jcolicchio

796
5
11

2

thanks, but why is it needed in the first place? A more official/formal explanation would be helpful. – TheFooProgrammer Nov 25 '12 at 04:17
4

This should be the selected answer. – DariusDare Feb 22 '17 at 16:20
this works better, I think – Jenuel Ganawed Mar 04 '20 at 05:19

score 48 · Accepted Answer · answered Nov 25 '12 at 11:46

This is the consequence of the "baseline" vertical alignment in CSS. From the CSS 2.1 spec, section 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties

baseline

Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline. (my emphasis)

Because the default alignment for the inline-blocks is "baseline", unless it is overridden, this rule applies. When text is put in the inline-block, that text will create a baseline for the inline-block and the first (non-bolded) sentence applies.

When there is no text in the inline-block, then it has no baseline and so the second (bolded) sentence applies.

In the JSFiddle here: http://jsfiddle.net/WjCb9/1/ I have removed from your example the margin:1em which was creating (at least for me) a misleading illusion, and added the text baseline to show where the baseline of the containing box is. The baseline is along the bottom of the word "baseline", so you can see that the empty inline-block has its bottom margin edge aligned with the parent's baseline as required by the CSS rule above.

score 8 · Answer 3 · edited May 23 '17 at 12:02

8

clone of this

Add vertical-align to article:

section[role=main] article { 
  ...
  vertical-align: middle;
}

http://jsbin.com/oqodol/6/edit

edited May 23 '17 at 12:02

Community

1
1

answered Nov 25 '12 at 04:18

Ashish Kasma

3,594
7
26
29

score 2 · Answer 4 · answered Nov 25 '12 at 04:17

The inline-block elements are positioned by the text-align of their parent.

If there is no text within the block, there is nothing to align.

You can solve this problem by using display: block; and floats, or my suggestion is to insert a non-breaking, zero-width space with pseudo elements:

section[role=main] article:before {
  content: "\2060";
}

Demo

Why my inline-block divs are not aligned when only one of them has text?

4 Answers4

baseline

Linked

Related