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

如果您将填充更改为：

填充：1px 3px 0px;

这将至少为您节省一个像素空间。默认情况下，第一个值是顶部和底部边框，第二个值是右侧和左侧。指定时，第三个值具体指底部，第四个值具体指左侧。

或者，您可以使用带有重复的1像素图像作为背景而不是边框，并将其从底部定位1px，这样可以节省另外一两个像素，但是我认为坚持使用简单的边框可能会更干净。 / p>

如果您想走影像路线，请按照以下步骤操作：

以所需的颜色创建1px x 1px的图像，然后执行以下操作：

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

重复序列会将其变成一条线，并且该位置会将其从您的字段的底部边缘向上凸出您喜欢的像素数。在“ URL”字段中放入图片链接。

您将完全控制线相对于字段的确切位置。

Answer 2

赋予#a高度为10px（小于字体大小）（编辑-最好为13像素，并考虑小写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;
}

减少输入文字和底部边框之间的间距

2 个答案: