Empty div has different position than non-empty div

Issue

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>

Answered By – Anurag Srivastava

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.