Empty div has different position than non-empty div

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;
}

>Solution :

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>