Why “Inline-block” doesn't work properly in this CSS?

Question

Please check the CSS below.

 /*rex is the container of ex,ex2,ex3*/
div.rex{
height:200px;
border:0px;
margin:60px auto;
padding: 0;
vertical-align:top;
}

div.e         


        

Answer 1

This is actually expected behavior in HTML. Because you are using inline-block, any newline character or whitespace you have after the element and before another inline element, will be counted as a space. If you want the blocks to stack side by side like in your picture, your HTML would need to be like this.

working demo

It's not very pretty, but then again, I would recommend using another approach, possibly floating the elements instead.

Refer to here for a more in depth explanation of why this occurs.

How to remove the space between inline-block elements?