Why Does This Inline-Block Element Have Content That Is Not Vertically Aligned

Why does this inline-block element have content that is not vertically aligned

The default vertical-align value is baseline which

Aligns the baseline of the box with the baseline of the parent box

Note: You can see this default value in action by adding vertical-align:baseline to your .divAccountData selector. Since baseline is default the alignment is unchanged.

You need to change it to top to align the blocks at the top, for example:

.divAccountData {
    display: inline-block;
    background: red;
    width: 400px;
    height: 40px;
    vertical-align: top;
}

Baseline is defined as

the line upon which most letters "sit" and below which descenders extend

To address why adding text seems to fix the problem it is because

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

from CSS2 Visual formatting model details

So adding just a single character changes the baseline, causing the second block to appear at the same vertical alignment. This only works if both blocks contain the same number of lines. Try adding more words to one of your blocks and you will see that without forcing vertical-align:top on the second block it will move depending on how many lines of text exist in the first block.

Edit: Found a related question Why is this inline-block element pushed downward?

Vertical align not working on inline-block

It doesn't work because vertical-align sets the alignment of inline-level contents with respect to their line box, not their containing block:

This property affects the vertical positioning inside a line box of
the boxes generated by an inline-level element.

A line box is

The rectangular area that contains the boxes that form a line

When you see some text which has multiple lines, each one is a line box. For example, if you have

p { border: 3px solid; width: 350px; height: 200px; line-height: 28px; padding: 15px; }

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

My inline-block elements are not lining up properly

10.8 Line height calculations: the 'line-height' and 'vertical-align' properties
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

This is a common issue involving inline-block elements. In this case, the default value of the vertical-align property is baseline. If you change the value to top, it will behave as expected.

Updated Example

.position-data {
    vertical-align: top;
}

Display inline-block elements won't vertically aligned

you need to add line-height to your container

.container{
    // size(width, height)
    @include size(97%, 250px);
    margin: 0 auto;
    text-align: center;
    line-height: 250px; //line-height equal the height
}

jsfiddle:http://jsfiddle.net/zhouxiaoping/gok4r2tr/

Inline-block not vertically aligning div-elements correctly

You need to add for global wrapper font-size: 0; and set regular font size for your inline blocks, you can also add: letter-spacing: 0; and word-spacing: 0;, something like this:

.wrapper {
  font-size: 0;
  letter-spacing: 0;
  word-spacing: 0;
}

  .wrapper .inline_block {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 1px;
    word-spacing: .1em;
    vertical-align: top;
  }

and example fiddle: http://jsfiddle.net/3ab22/
and updated fiddle: http://jsfiddle.net/3ab22/3/

Why are these two inline-blocks not aligned?

Do vertical-align:top on whatever has inline-block.

.calendar { vertical-align: top; }

Explanation: inline-blocks are still "in-line" and the vertical alignment is baseline meaning they aren't consistent and it will vary on their height, top makes them consistently start at the top.

Wrong vertical alignment of inline-block divs

display: inline-block is vertically aligning your cards along the bottom (baseline) of the text within them, because the default ("initial value") for vertical-align is baseline.

Add vertical-align: top to it's CSS and everything should line up nicely.

Why Does This Inline-Block Element Have Content That Is Not Vertically Aligned