html - Extra space with inside -

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

i utilize iconic fonts, , face same issue when seek set icon within button.

i've got 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: can see in snippet lastly button has not same height previous one. caused default font-size applied in iconic font. a solution first provided tibbers set line-height property. works, button no longer vertically aligned. here comes question :

how alter button font size, preserving height , keeping vertically aligned ?

class="snippet-code-css lang-css prettyprint-override">* { 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; } class="snippet-code-html lang-html prettyprint-override"><input type="text" value="value"> <button>send</button> <button><i></i></button>

does know should ?

to illustrate i'm searching, made several screens :

without change

with line-height: 0;

with vertical-align: middle;

with line-height: 0; vertical-align: middle;

expected

what this? add together display:block i:before , line-height in input create 3 elements aligned.

i added line-height:20px i:before because reset line-height 0 in *

see snippet below.

class="snippet-code-css lang-css prettyprint-override">* { 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; } class="snippet-code-html lang-html prettyprint-override"><input type="text" value="value"> <button>send</button> <button><i></i> </button>

html css icons