Why Do Inline Block Divs Behave Differently From Inline Block Buttons? - html

Question

I tried to change the y-height of an inline button and realized that it doesn't work by setting a negative margin (transform would work though). Choosing a div instead of a button works, also wrapping the div inside a button. Where does this difference come from? I guess it has to do with baseline?
div, button {
box-sizing: border-box;
font-size: 0;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
.inline-offset {
display: inline-block;
width: 10px;
height: 10px;
margin-bottom: -5px;
border: solid 2px black;
}
Hello,<br />
dear
<div class="inline-offset"></div>
<br />
world!
<br />
<br />
Hello,<br />
dear
<button class="inline-offset"></button>
<br />
world!
<br />
<br />
Hello,<br />
dear
<button><div class="inline-offset"></div></button>
<br />
world!
[EDIT] Just in case it appears differently in some browsers, here's what it looks like to me. Second box is positioned as if no margin was present.

Answer 1

Recently I learned that whenever you set display: inline or inline-block you must be careful about any spaces or newlines that exist in front of the element.
I will be honest in saying that I don't know yet any official documentation about this behavior, but we all would appreciate any help to clarify it.
div, button {
box-sizing: border-box;
font-size: 0;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
.inline-offset {
display: inline-block;
width: 10px;
height: 10px;
border: solid 2px black;
}
Hello,<br />
dear <!--
--><div class="inline-offset"></div>
<br />
world!
<br />
<br />
Hello,<br />
dear <!--
--><button class="inline-offset"></button>
<br />
world!
<br />
<br />
Hello,<br />
dear <!--
--><button><div class="inline-offset"></div></button>
<br />
world!