我有width: calc(100% - 100px);的输入没有填充/边距/边框。我想在position : inline-block;和width : 100px;旁边添加一个div。
div进入下一行，但我找不到任何理由。如果我将div宽度减小到96px那么它工作正常。我想知道造成4px缺失宽度的原因是什么！
请注意box-sizing : borderbox与此问题无关，因为我没有任何填充或边框。
这是the plunker，使用chrome和firefox进行测试。
答案 0 :(得分：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>