Reduce spacing between input text and bottom border - html

Question

I'd like to reduce the space between the bottom border of the input text field and the text so that they're closer together.
#a {
padding: 1px 3px;
background: transparent;
border: 0;
outline: 0;
border-bottom: 0.8px solid #D3D3D3;
width: 300px;
}
<div style="text-align: center;"><input type="text" id="a" style="font-family: open-sans, sans-serif; font-style: normal; font-weight: 300; color: black; font-size: 16px; text-align: left;"></div>

Answer 1

Give #a a height of 10px (less than size of the font)
(Edit - 13 px would be best, consider visibility of characters like small case q,p,y.. etc)
Fiddle - https://jsfiddle.net/xpvt214o/735385/
#a
{
padding: 1px 3px;
background: transparent;
border: 0;
outline: 0;
border-bottom: 2px solid #D3D3D3;
width: 300px;
height: 10px;
}

Answer 2

If you change your padding to:
padding: 1px 3px 0px;
It'll save you a pixel of space at least. The first value is the top and bottom border by default, and the 2nd is right and left. A third value when specified refers to the bottom specifically, and a 4th refers to left specifically.
Alternatively, you could use a 1-pixel image with a repeat as a background instead of a border and position it 1px from the bottom so save another pixel or two, but I think sticking with a simple border is probably cleaner.
If you want to go the image route, here's how to do it:
create a 1px x 1px image in the color you want, and do something like this:
border-bottom: 0px;
background-image: url('insert-imageURL');
background-repeat: repeat-x;
background-position-y: -2px;
The repeat will turn it into a line, and the position will bump it up from the bottom edge of your field by however many pixels you like. Put in your image link inside the URL field.
You'll have full control over exactly where the line goes in relation to the field.