爲什麼會有跨度之間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

回答

相關問題