为什么 span 和 outdiv 之间有 1px 的空间答案

【问题标题】：why there is 1px space between span and outdiv为什么 span 和 outdiv 之间有 1px 的空间
【发布时间】：2016-09-04 11:07:21
【问题描述】：

* {
  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 的空间？有人可以帮帮我吗？

【问题讨论】：

你能做一个 sn-p 或 codepen 吗？，你似乎也缺少结束 div 标签

标签： html css

【解决方案1】：

你需要为display: inline-blockspan标签设置vertical-align:top

*{
        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">

【讨论】：

我想知道为什么？
对于display inline-block 元素，默认的vertical-align 是baseline
输入和跨度都与基线对齐，我想应该没有空格？它们都是 20px 行高
在christopheraue.net/2014/03/05/vertical-align中有定位显示inline、inline-block的详细说明

【解决方案2】：

默认情况下，span 元素是内联元素，它尊重标记中的空白。这就是输入和跨度之间空间很小的原因。谢谢..

【讨论】：

这不是问题要问的，它是关于输入的底部，以及包含的 div。
@Lee，我已经回答了正确的预期。内联元素的空格取决于浏览器。
不，你说的是输入和跨度之间的空间，这不是问题要问的。
问题是指垂直间距；你的观点适用于水平间距