为什么会有跨度之间1px的空间和outdiv

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

我想知道为什么有跨度的底部和outdiv的底部之间1px的空间？有人可以帮我吗？

来源

2016-09-01 a86356

你可以做一个片段或codepen吗?,你似乎错过了结束div标记 – Ricky

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

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

来源

2016-09-01 04:26:38 z0mBi3

我想知道为什么？ – a86356

默认'vertical-align'是'display'' inline-block'的基线' – z0mBi3

输入和跨度都对齐到基线，我想它应该没有空间吗？它们都是20px行高 – a86356

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

来源

2016-09-01 04:46:45 KickyTrick

中定位显示的详细解释inline，inline-block这不是问题的要求，它是关于输入的底部，并且包含DIV。 – Lee

@李，我有正确的答案。内联元素的空间取决于浏览器。 – KickyTrick

不，你正在谈论输入和跨度之间的空间，这不是问题的要求。 – Lee

为什么会有跨度之间1px的空间和outdiv

回答

相关问题