Problem with inline CSS block with mixed text and empty div

Question

I have a problem with div alignment (mixed empty or with text) when display: inline-block . See the following image for an example:

As you can see, the div with the text is somehow not aligned with the rest of the div s. See this JSFiddle for a working example of my problem.

I already know some ways to fix this problem, but I want to understand why this is happening. My goal is to solve this problem with minimal CSS changes (possibly without changing the HTML).

HTML

 <div class="bar"> <div class="actors"> <div class="actor" style="background-image: url('http://lorempixel.com/32/32/')"></div> <div class="actor" style="background-image: url('http://lorempixel.com/32/32/')"></div> <div class="actor num"><span>5</span></div> <div class="actor" style="background-image: url('http://lorempixel.com/32/32/')"></div> <div class="actor num"><div>6</div></div> </div> <div class="lol">lol</div> </div> 

CSS

 .bar { height: 40px; border-bottom: 1px solid #000; } .actors { float: left; } .actor { display: inline-block; width: 34px; height: 34px; background-color: gray; border-radius: 16px; border: 1px solid red; } .num { } .lol { float: right; } 

Answer 1

The reason is the default vertical-align that every text has. It has an initial baseline value and therefore the orientation is on the baseline.

The easiest and most convenient way to fix this is to set vertical-align: top; :

 .actor { vertical-align: top; } 

Demo: JSFiddle

Answer 2

I would rather use

 .actor { vertical-align: middle; } 

top fixes your problem here, but it pushes them all to the top of the line. The opposite is done below. Technically speaking, they are still aligned anyway. Therefore, why not bring them to the actual middle in order to prevent further conflicts.

Jfiddle