使用calc設置輸入寬度無法按預期工作

Question

我有一個沒有填充/邊距/邊框的width: calc(100% - 100px);的輸入。我想把position : inline-block;和width : 100px;放在旁邊。

div轉到下一行，但我找不到任何理由。如果我將div寬度減小到96px，那麼它工作正常。我想知道是什麼導致4px缺少的寬度！

請注意box-sizing : borderbox與此問題無關，因爲我沒有任何填充或邊框。

這裏是the plunker，使用Chrome和Firefox進行測試。

Answer 1

刪除元素之間的空白區域。默認情況下，內聯和內嵌塊將保留元素之間的空間，因爲它們是內聯的（就像字/字之間的空格）。您也可以在它們之間放置HTML註釋，以便在那裏沒有空白區域。

<input type="test" style="width: calc(100% - 100px); padding: 0; border: 0; margin: 0; box-sizing:borderbox" value="100%-100px input"><div style="width: 97px; display: inline-block">97 px Div</div> 

或

<input type="test" style="width: calc(100% - 100px); padding: 0; border: 0; margin: 0; box-sizing:borderbox" value="100%-100px input"><!-- 
--><div style="width: 97px; display: inline-block">97 px Div</div>