输入字段后无法解释的余量

Question

我有一点codepen我正在努力。输入字段后只有一个随机边距。我设置了

*{
  margin: 0; 
  padding: 0; 
}

，所以不应该是这个原因。另外两个输入字段的css：

#plannername{
  width:40%;
  background-color:#9eefbc;
  margin-left:20%;
  border:0;
  font-size:2em;
  padding:20px;
}

#plannersubmit{
  width:17%;
  background-color:#6dce91;
  border:0;
  font-size:2em;
  padding:20px;
}

正如您所看到的，除了margin-left: 20%的{​​{1}}之外，没有保证金。但这不应该影响它右边的那个小边距/提交按钮的左边。 什么可能导致这个小余量？

Answer 1

如果按 Ctrl + A ，您会发现它实际上不是保证金，而是单一空格。

这是一篇很棒的文章，关于它以及如何摆脱它：https://css-tricks.com/fighting-the-space-between-inline-block-elements/