Empty div has different position than non-empty div

Question

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 Vertical align](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) — DBS, May 04 '22 at 16:18

score 0 · Accepted Answer · answered May 04 '22 at 16:19

0

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 May 04 '22 at 16:19

Anurag Srivastava

14,077
4
33
43

The static positioning and the default document flow is rarely the best approach to use for alignment or layout. You should consider using _flex_ or _grid_ for proper layouts, which gives you finer control over how elements are displayed and positioned. – akaAbdullahMateen May 04 '22 at 16:24
@akaAbdullahMateen Indeed, and your comment is an answer better suited for another question – Anurag Srivastava May 04 '22 at 16:26

Empty div has different position than non-empty div

1 Answers1