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.ex{ width:34%; height:200px; background-color:#4f443a; display:inline-block; margin: 0; padding: 0; vertical-align:top; }  div.ex2{ width:0.5%; height:200px; display:inline-block; margin: 0; padding: 0; vertical-align:top; }   div.ex3{ width:65.5%; height:200px; background-color:#7e8547; display:inline-block; margin: 0; padding: 0; vertical-align:top; } 

The result in browser:

What I need:

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.

<div class="rex">     <div class="ex"></div><div class="ex2"></div><div class="ex3"></div> </div> 

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?

Answer 2

Just extending answer giving by @Tristan here.

You have repeated the css code unnecessarily. You can minify it by using multiple css like :

.ex, .ex2, .ex3 {     display: inline-block;     vertical-align: top;     margin: 0;     padding: 0;     height: 100%;  /* no need of height: 200px; here */ }                  /* if you need to extend it to parent height */                    /* then use height: 100% */ 

OR

div.rex > div { /* code here */ } 

You can keep elements side by side by using any of the below approaches:

• Using display: table-cell

• Using float: left

• Using display: inline-block (check @Tristan's solution)