Align Inline-Block Divs to Top of Container Element

Align inline-block DIVs to top of container element

Because the vertical-align is set at baseline as default.

Use vertical-align:top instead:

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;   
    vertical-align:top; /* <---- this */
}

http://jsfiddle.net/Lighty_46/RHM5L/9/

Or as @f00644 said you could apply float to the child elements as well.

Make inline block align at top instead of bottom

you need to add vertical-align : top to both divs

.ItemCollection {
    display: inline-block;
    width: 45%;
    vertical-align: 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.

Vertical align: top on inline block divs

Add below css and check

.col-33 {
    width: 32.5%;
    display: inline-block;
    padding: 0;
    vertical-align: top;
}

gap above the first box when trying to align two boxes in sequence using display: inline-block;

Add vertical-align: middle; to h1 and div. I used float to remove the gap between the blue and the green box.

body,
header,
h1,
div {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  height: 100px;
  background-color: red;
}

h1 {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: blue;
  vertical-align: middle;
  float: left;
}

div {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: green;
  vertical-align: middle;
  clear:left;
}

<header>
  <h1>text</h1>
  <div></div>
</header>