Why display:inline-block alignment is not as expected

Question

Ok, so I was trying to understand the display:inline-block property when I got a layout which was not expected.

If I remove the text from first div (i.e first), then the alignment is corrected.

div{
  display:inline-block;
  height:100px;
  width:100px;
}

<div style="background:grey;">first</div>
<div style="background:red;"></div>

I want both <div> elements to be on the same horizontal level.

I know there are other ways to do this but I really want to know where I went wrong (or what I misunderstood) for this code.

Answer 1

This happens because the default property for vertical-align is baseline, and you don't specify it in your example. This means that the inline-block elements will align to their baseline:

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.

In short, that means that if there is text in an inline-block element, then the element will align to the base of that text. If there is no text, it will align to the bottom margin. So inline-block elements with text in them get pushed down compared to those without.

This is corrected by setting a vertical-align of top, bottom, or more preferably, middle:

div {
  display: inline-block;
  height: 100px;
  width: 100px;
  vertical-align: middle;
}

<div style="background:grey;">first</div>
<div style="background:red;"></div>

One could float the elements to the left, though this works because float takes the elements out of the flow context, and treats them as block elements. Applying float: left essentially removes display: inline-block; you cannot float an inline-block element.

div {
  display: inline-block;
  height: 100px;
  width: 100px;
  float: left;
}

<div style="background:grey;">first</div>
<div style="background:red;"></div>

Gives the same effect as:

div {
  height: 100px;
  width: 100px;
  float: left;
}

<div style="background:grey;">first</div>
<div style="background:red;"></div>

Answer 2

I don't recommend using FLOATS . It will make item go out of flow, making the parent container to loose height, for which we need to create some extra css and component.

div{
    display:inline-block;
    height:100px;
    width:100px;
    vertical-align: middle;
}

apply vertical align property. It will be fine. OR you can use flexbox or grid layout. It will be much easier for these things.

Answer 3

div{
  display:inline-block;
  height:100px;
  width:100px;
  vertical-align: top;
}  

always use vertical-align with display: inline: block;

Answer 4

Your going to want to float both of the divs to the left

try:

div{
  display:inline-block;
  height:100px;
  width:100px;
  float:left;
}

If you want to have space between the two divs add

margin-right:1%; 

Answer 5

You have missed float:left property

div{
display:inline-block;
  float:left;
height:100px;
width:100px;
}