large empty space for inline-block div

Question

I am trying to put two divs side by side by using inline-block. For some reason, I am seeing a large empty space at one of the divs.

I have created a pen at http://codepen.io/weima/pen/eKEbD

The problematic div is the one with class .input-area. The empty space is gone if I remove display:inline-block from .input-area css, but then I wont be able to put these two divs side by side.

Is there anyway to solve this without using float?

score 5 · Accepted Answer · edited May 23 '17 at 12:24

5

You could add vertical-align:top to the element in order to fix the alignment issues.

UPDATED EXAMPLE HERE

.input-area {
    vertical-align: top;
    display: inline-block;
    width: 450px;
    border: 1px solid green;
}

The default value to the vertical-align property is baseline. If you are curious as to what this does, take a look at this answer.

edited May 23 '17 at 12:24

Community

1
1

answered Mar 13 '14 at 18:43

Josh Crozier

233,099
56
391
304

It would be nice to know reason why it's happening as well. +1 – Morpheus Mar 13 '14 at 18:45
1

@Morpheus Because by default, they are aligned to *baseline* – Mr. Alien Mar 13 '14 at 18:47

large empty space for inline-block div

1 Answers1