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

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>

Answer 2

Inline elements (for whatever reason) are surrounded by whitespace.
Changing the element to display: block will fix your problem but there are other ways to fix it whilst keeping it inline.
One way would be to set font-size: 0 on the .wrap element as the whitespace is governed by font size. In this instance that would be fine as you are setting a font size on the child button (beware when using ems as they are relative to the parent font size).
More options can be found here - https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

Solving the problem:
Simply you're getting the extra pixel because of this:
body {
line-height: 1.5;
}
All your HTML elements are inheriting this attribute from the body.
Answering the question:
why the height of the out div is affected by vertical-align
The <button> default display attribute is "inline-block", which gets affects by white-spaces, line-height, font-size, and other text-related CSS attributes. vertical-align is one of these text-related attributes. For example, if you change the button's display to "block" you can see that it no longer affects the .wrap's height.

Answer 4

Please give block CSS for the btn
.btn { display: block;}
Why block and not inline-block??
Elements in the inline formatting context will cause white spaces from carriage returns and white-spaces in your HTML
The inline-block value is incredibly useful when wanting to control margin and padding on "inline" elements without the need to block and float them. One problem that arrises when you use inline-block is that whitespace in HTML becomes visual space on screen.
This isn't a "bug" (I don't think). It's just the way setting elements on a line works. You want spaces between words that you type to be spaces right? The spaces between these blocks are just like spaces between words.
So thats OK!