html - Extra space with inside -

I often use itacont fonts, and often face the same problem when I click on a button I try to put in.

I have found an extra space, but an additional place has been found. ¶:

Edit:
You can see in this snippet the height of the previous button is not the same as the previous one. This is the default font-size < / Code>. Setting the property to line-height does this work, but the button is not vertically aligned.
So here comes the question:

How can one change the font size of a button, maintain its height and keep it vertically? / Strong>

  * {box-size: border-box; Margin: 0; Padding: 0; } Input, Button {Line-height: 20px; Padding: 10px; Limit: 1px solid black; Swim left; } Button i: {content: before "\ 25b6"; Font-size: 20px; Font style: normal; }   
  & lt; Input type = "text" value = "VALUE" & gt; & Lt; Button & gt; Send & lt; / Button & gt; & Lt; Button & gt; & Lt; I & gt; & Lt; / I & gt; & Lt; / Button & gt;     
 Does anyone know where I should look?  
 I have created several screens to know what I'm looking for:  
 
 No change   
   
 
 with  line-height: 0;    
   
 
  Vertical-align: center;    
   
 
 with  line-height: 0; Vertical- align: middle;  
  
  Expected    
    
 
 
 What about it? Simply add your code to  i: first  and  line-height  in  input  in the  display: block  3 element combine < / P> 
 I have added  line-height: 20px  before your  i: because i am in line with  line-height  0 Reset  *   
 See snippet below. 
 
 
  * {box size: border-box; Margin: 0; Padding: 0; Line-height: 0} input, button {row-height: 20px; Padding: 10px; Limit: 1px solid black; Swim left; } Input {line-height: 22px; } Button i: {content: before "\ 25b6"; Font-size: 20px; Font style: normal; Display area; Line-height: 20px; }   
  & lt; Input type = "text" value = "VALUE" & gt; & Lt; Button & gt; Send & lt; / Button & gt; & Lt; Button & gt; & Lt; I & gt; & Lt; / I & gt; & Lt; / Button & gt;