-20px HTML复选框

Question

这是我的代码：http://jsfiddle.net/6mn408ce/

所以，我一直在尝试修复，以便在调整textarea的大小时，应该扩展带有id“message”的输入字段以占用其余的可用位置。

为此，我使用css中的calc（）函数减去100％ - 所有其他元素像素。

奇怪的是，我不知道为什么会这样：

#message {
    width: calc(100% - 120px - 180px - 30px - 20px);
}

但是如你所见，实际上没有宽度为20px的元素，如果我最后不做-20px就会失败，为什么？

我已经尝试调整元素和字体大小的大小但是没有效果，这是否可能需要对代码中的复选框执行某些操作？

编辑：我认为这是输入之间的边距，但我已将所有边距/填充设置为0，为什么它不服从？！

Answer 1

空间来自您的代码中的返回/空格：
改变这个

<input id="message" type="text" placeholder="Message"/>
<input id="submit" type="button" value="Submit"/>
<input id="name" type="text" placeholder="Name"/>
<input checked id="scroll" type="checkbox"/> 

到

<input id="message" type="text" placeholder="Message"/><input id="submit" type="button" value="Submit"/><input id="name" type="text" placeholder="Name"/><input checked id="scroll" type="checkbox"/>

或浮动输入。