'Empty div has different position than non-empty div [duplicate]

I have 3 divs. Two of them have some text inside and one is empty. Like to display them in line but this empty div is a little misalignment from other two?

           +--+
 +--+ +--+ |  |
 |A | |B | +--+  
 +--+ +--+

And here is my css for those 3 divs

.box1, .box2, .box3 {
    border: 1px solid #999;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    margin: 2px;
}
css


Solution 1:[1]

Use vertical-align: top;

.box{
    border: 1px solid #999;
    display: inline-block;
    vertical-align: top;
    width: 1.5rem;
    height: 1.5rem;
    margin: 2px;
}
<div class="box">A</div>
<div class="box">B</div>
<div class="box"></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Anurag Srivastava

Related Questions