* {
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">
我想知道为什么span的底部和outdiv的底部之间有1px的间距?有人可以帮我吗?
最佳答案
您需要为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;
}
<div class="box">
<span>xx</span>
<input type="text" value="322xxx">