Extra space with <i> inside <button> - html

Question

I often use iconic fonts, and often face the same issue when I try to put an icon inside a button.
I've got an extra space, a̶n̶d̶ ̶I̶'̶m̶ ̶n̶o̶t̶ ̶a̶b̶l̶e̶ ̶t̶o̶ ̶f̶i̶n̶d̶ ̶w̶h̶e̶r̶e̶ ̶i̶t̶ ̶c̶o̶m̶e̶s̶ ̶f̶r̶o̶m̶:
EDIT:
You can see in this snippet the last button has not the same height as the previous one. This is caused by the default font-size applied in the iconic font. A solution first provided by Tibbers was to set the line-height property. It works, but the button is then no longer vertically aligned.
So here comes the question :
How to change a button font size, preserving its height and keeping it vertically aligned ?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
input,
button {
line-height: 20px;
padding: 10px;
border: 1px solid black;
float: left;
}
button i:before {
content: "\25b6";
font-size: 20px;
font-style: normal;
}
<input type="text" value="VALUE">
<button>SEND</button>
<button><i></i></button>
Does somebody know where I should look ?
To illustrate what I'm searching, I made several screens :
Without change
With line-height: 0;
With vertical-align: middle;
With line-height: 0; vertical-align: middle;
Expected

Answer 1

What about this? Just add display:block to your i:before and the line-height in the input to make all the 3 elements aligned.
I added line-height:20px to your i:before because I reset the line-height to 0 in *
See snippet below.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
line-height: 0
}
input,
button {
line-height: 20px;
padding: 10px;
border: 1px solid black;
float: left;
}
input {
line-height: 22px;
}
button i:before {
content: "\25b6";
font-size: 20px;
font-style: normal;
display: block;
line-height: 20px;
}
<input type="text" value="VALUE">
<button>SEND</button>
<button><i></i>
</button>

Answer 2

I've sorted it out be setting up the line-height to the i:before element
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
input,
button {
line-height: 20px;
padding: 10px;
border: 1px solid black;
float: left;
}
button i:before {
content: "\25b6";
font-size: 20px;
line-height: 15px;
font-style: normal;
}
<input type="text" value="VALUE">
<button>SEND</button>
<button><i></i></button>

Answer 3

Just add line-height: 0 to the i:before :)
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
input,
button {
line-height: 20px;
padding: 10px;
border: 1px solid black;
float: left;
vertical-align: top;
}
button i:before {
content: "\25b6";
font-size: 20px;
font-style: normal;
line-height: 0px;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
<input type="text" value="VALUE">
<button>SEND</button>
<button><i></i></button>

Answer 4

The problem I see is that particular charachter (▶) is not vertically centered... just try to select it to understand what I mean.
i guess you can correct it placing it with line-height:20px (same as text in the button), vertical-align:middle and a litte negative margin on top... if you use em units for this property you can change the dimension of the font and it will be still working... i think that a margin-top:-0.1em; is enough.
here the complete solution
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
input,
button {
line-height: 20px;
padding: 10px;
border: 1px solid black;
float: left;
}
button i:before {
content: "\25b6";
font-size: 20px;
line-height:20px;
font-style: normal;
display:block;
vertical-align:middle;
margin-top:-0.1em;
margin-bottom:0.1em;
}
<input type="text" value="VALUE">
<button>SEND</button>
<button><i></i></button>

Answer 5

Mixin answers and testing my own ideas, I finally came to a suitable solution.
First, I discovered the \25b6 character is not perfectly vertically aligned. It's a few pixel under the middle line. So I made tries with other characters to be sure.
Here's my solution :
Use height: 40px instead of line-height: 20px on input, button (40 = line-height + padding-top + padding-bottom)
Add display: table; line-height: 0; to i. The i element itself had a default line-height and this size was pushing down the i:before element.
Add display: table-cell; vertical-align: middle; to i:before
Final code :
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
input,
button {
height: 40px;
padding: 10px;
border: 1px solid black;
float: left;
}
button i {
display: table;
line-height: 0;
}
button i:before {
content: "\25b6";
font-size: 20px;
font-style: normal;
line-height: 0;
display: table-cell;
vertical-align: middle;
}
<input type="text" value="VALUE">
<button>SEND</button>
<button><i></i></button>