* {
margin: 0;
padding: 0;
}
.box {
width: 230px;
border: 1px solid red;
}
input {
width: 30px;
line-height: 20px;
background: #e5e5e5;
border: 0;
text-align: center;
padding: 0 5px;
font-size: 14px;
}
span {
padding: 0 2px;
cursor: pointer;
line-height: 20px;
font-size: 14px;
display: inline-block;
}

<div class="box">
<span>xx</span>
<input type="text" value="322xxx">
&#13;
我想知道为什么在span的底部和outdiv的底部之间有1px的空间?有人可以帮帮我吗?
答案 0 :(得分:1)
您需要为vertical-align:top
display: inline-block
代码
span
*{
margin: 0;
padding: 0;
}
.box{
width: 230px;
border:1px solid red;
}
input{
width: 30px;
line-height: 20px;
background: #e5e5e5;
border: 0;
text-align: center;
padding: 0 5px;
font-size: 14px;
}
span{
padding: 0 2px;
cursor: pointer;
line-height:20px;
font-size: 14px;
display: inline-block;
vertical-align: top;
}
&#13;
<div class="box">
<span>xx</span>
<input type="text" value="322xxx">
&#13;
答案 1 :(得分:0)
默认情况下,span元素是内联级元素,它尊重标记中的空格。这就是输入和跨度之间的小空间的原因。感谢..