Font-size affecting next DIV positioing

Question

I've come across this strange problem whereby the font-size in one div somehow effects the positioning of the next div. My code is:

<div class="first">
  1
</div>  
<div class="second">
  2
</div>

And CSS:

.first{
    border: 1px blue solid;
    display: inline-block;
    font-size: 47px;
    height: 80px;
    width: 105px;
}

.second{
    border: 1px red solid;
    height: 80px;
    width: 105px;
    display: inline-block;
}

The result is:

The second div is not horizontally aligned with the first div.

The jsfiddle here. If I remove the font-size, they both align horizontally. Why is this happening?

Use CSS: '.first {float: left;}' – Jagdish Parmar Dec 08 '15 at 11:37 — Jagdish Parmar, Dec 08 '15 at 11:37

Rohit Azad Malik · Accepted Answer · 2015-12-08T11:41:24.897

Change The vertical-align value is default baseline

Hi now define your first and second class vertical-align:top as like this

.first,.second{vertical-align:top;}

Demo

.first{
    border: 1px blue solid;
    display: inline-block;
    font-size: 47px;
    height: 80px;
    width: 105px;
}

.second{
    border: 1px red solid;
    height: 80px;
    width: 105px;
    display: inline-block;
}
.first, .second{vertical-align:top;}

<div class="first">
  1
</div><div class="second">
  2
</div>

score 0 · Answer 2 · answered Dec 08 '15 at 11:35

It happens because the baselines change when you change the font-size or height. Give vertical-align in your CSS:

.first, .second {vertical-align: top;}

Snippet

.first {
  border: 1px blue solid;
  display: inline-block;
  font-size: 47px;
  height: 80px;
  width: 105px;
}
.second {
  border: 1px red solid;
  height: 80px;
  width: 105px;
  display: inline-block;
}
.first,
.second {
  vertical-align: top;
}

<div class="first">
  1
</div>
<div class="second">
  2
</div>

Preview

Fiddle: https://jsfiddle.net/pgrwg0dw/

Font-size affecting next DIV positioing

2 Answers2