Inline-Block div elements do not line up as expected [duplicate]

Answer 1

add vertical-align:top; to .landing-block class

Answer 2

inline-block elements are vertical-align:baseline; by default. Change this to vertical-align:top;

 .landing-block {
        display: inline-block;
        background-color: #eeeeee;
        margin-right: 30px;
        width: 192px;
        height: 140px;
        border: 1px solid #aaaaaa;
        -moz-box-shadow: 3px 3px 5px #535353;
        -webkit-box-shadow: 3px 3px 5px #535353;
        box-shadow: 3px 3px 5px #535353;
        vertical-align:top; /* add this rule */

    }

Answer 3

Set vertical-align: top for the .landing-block class declaration in your CSS.

Answer 4

Add float: left

.landing-block {
display: inline-block;
background-color: #eeeeee;
margin-right: 30px;
width: 192px;
height: 140px;
border: 1px solid #aaaaaa;
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
float: left;    

}

jsfiddle