Html CSS：尝试使用div+；输入，但顶部填充不好

我将为我的一个项目制作一个jQuery插件，我正在尝试用div和span模拟一个输入，以使它“更丰富”

与[input]不同，我将使用[span（包含用于删除的a）+input]，这样用户就不会看到差异，因为他将在无边框的真实输入上键入，结果（接受时）将显示在字段左侧的一个小矩形框中

但我有一个问题：div的顶部和包含左侧文本的span之间总是有一个间隙。输入相同，顶部和底部的边距不相同。 我正在尝试删除不正确的顶部边距（或填充），它看起来像是顶部的3px和底部的2px。我似乎什么都试过了，结果总是在span&input的顶部有太多的像素

---

我在这里重现了我的问题（只有几行css代码）：

---

span中的

内容

在这方面我需要一些帮助，我尝试了边距、填充、线条高度、显示：内联块。。。但它似乎仍然不起作用

---

谢谢你的帮助。

我想这就是你想要的 1.向左添加一个浮动 2.添加高度和线条高度

<div class="input-reference"><span>Content in span <a href="#"><i class="icon-remove">x</i></a></span><input type="text"></div>

input, textarea, span {
    font-family:sans-serif;
    font-size:12px;
    outline: none;
    margin: 0;
    border: 1px solid transparent;
}

.input-reference{
    display: inline-block;
    border: 1px solid #DDDDDD;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.input-reference:after{
    content: "";
    display: block;
    clear: both;
}

.input-reference span,
.input-reference input{ 
    display: inline-block;
    float: left;
    padding: 0 5px;

    /*adjust your height here*/
    line-height: 20px;
    height: 20px;
}

.input-reference span{
    background-color: #53A9FF;  
    color: #fff;    
}

span中的

内容
输入，文本区域，范围{
字体系列：无衬线；
字体大小：12px；
大纲：无；
保证金：0；
边框：1px实心透明；
}
.输入参考{
显示：内联块；
边框：1px实心#DDDDDD；
-moz框大小：边框框；
框大小：边框框；
}
.输入参考：在{
内容：“；
显示：块；
明确：两者皆有；
}
.输入参考范围，
.输入参考输入{
显示：内联块；
浮动：左；
填充：0 5px；
/*在这里调整你的高度*/
线高：20px；
高度：20px；
}
.输入参考范围{
背景色：#53A9FF；
颜色：#fff；
}

更新

检查是否空闲

---

有趣的问题，它肯定是字体大小，因此与字体相关。例如，尝试将跨度上的字体大小设置为55px，一切看起来都很完美。您尝试过其他字体系列吗？等等，我将编写您的脚本…尝试一下@DOCTYPEHTML。您对{position:relative，top:-3px，bottom:-1px；}所做的操作不太好，而且是一种通常会导致其他问题的css代码。@burnedikt您是对的，某些字体的效果更好，而其他字体的效果更差。然而，我似乎找不到一个解决方案，适用于每种字体大小，即使字体似乎更适合。

<div class="input-reference"><span>Content in span <a href="#"><i class="icon-remove">x</i></a></span><input type="text"></div>

input, textarea, span {
    font-family:sans-serif;
    font-size:12px;
    outline: none;
    margin: 0;
    border: 1px solid transparent;
}

.input-reference{
    display: inline-block;
    border: 1px solid #DDDDDD;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.input-reference:after{
    content: "";
    display: block;
    clear: both;
}

.input-reference span,
.input-reference input{ 
    display: inline-block;
    float: left;
    padding: 0 5px;

    /*adjust your height here*/
    line-height: 20px;
    height: 20px;
}

.input-reference span{
    background-color: #53A9FF;  
    color: #fff;    
}