why the height of the out div is affected by vertical-align

Question

in chrome, I thought the height of .wrap should be 24px. it is 25px when the vertial-align is set to middle. can someone explain why?

answer in this article

body {
  line-height: 1.5;
}

.wrap {
  font-size:16px;  /* 16*1.5= 24 */
}

.btn {
  font-size: 14px;
  padding: 4px;
  line-height: 1;
  box-sizing: border-box;
  border: 1px solid blue;
  vertical-align: middle;
}

<div class="wrap">
  <button class="btn">
    OK
  </button>
</div>

Answer 1

As It is explained Here

Aligns the middle of the element with the baseline plus half the x-height of the parent.

The line-height of your .wrap element is by default 1.5 that inherits from the body, the vertical align property will render depending on your line-height, so if the line height is bigger than your wrapper element, you will see the effect. to fix it just put line-height in your .wrap class, you can play with it to see how the line-height affects the vertical alignment.

body {
  line-height: 1.5;
}

.wrap {
  line-height:1;
  background:red;
}

.btn {
  font-size: 14px;
  padding: 4px;
  line-height: 1;
  box-sizing: border-box;
  border: 1px solid blue;
  vertical-align: middle;
}

<div class="wrap">
  <button class="btn">
    OK
  </button>
</div>