减少输入文本和下边框之间的间距

Question

我想减少输入文本字段的下边框和文本之间的空间，以便它们更紧密。

#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

给#a一个10px的高度（小于字体的大小）（编辑 - 13 px是最好的，考虑字符的可见性，如小案例q，p，y ..等）

小提琴 - 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

如果您将填充更改为：

填充：1px 3px 0px;

它至少可以为你节省一些空间像素。默认情况下，第一个值是顶部和底部边框，第二个值是右侧和左侧。指定时的第三个值具体指底部，第四个指特指左侧。

或者，您可以使用带有重复的1像素图像作为背景而不是边框​​，并将其从底部定位1px，以便保存另一个或两个像素，但我认为坚持使用简单的边框可能更清晰。

如果你想去图像路线，这里是如何做到的：

以您想要的颜色创建1px x 1px图像，并执行以下操作：

border-bottom: 0px;
background-image: url('insert-imageURL');
background-repeat: repeat-x;
background-position-y: -2px;

重复会将其变成一条线，并且无论您喜欢多少个像素，该位置都会从场的底部边缘向上突出。在URL字段中放入图像链接。

您可以完全控制线相对于场的确切位置。