为什么这些按钮之间还有间距？

Question

我想显示内联的四个按钮,它们之间没有任何间距.我有一个显示当前行为的jsfiddle.简而言之,以下HTML/CSS:

<div>
    <input id="unconfirmedYes" type="button" value="10%" />
    <input id="confirmedYes" type="button" value="98% YES" />
    <input id="confirmedNo" type="button" value="2% NO" />
    <input id="unconfirmedNo" type="button" value="90%" />
</div>

div input[type=button] {
    display: inline;
    margin: 0;
    padding: 0;
}
#unconfirmedYes, #unconfirmedNo {
    width: 10%;
}
#confirmedYes, #confirmedNo {
    width: 40%;
}

实际上将按钮向上排列,但它们之间仍然有间距.如何摆脱那个间距,使它们相互叠加？

Answer 1

<input/>元素之间的空白是间距的来源.如果删除换行符并使标签完全相邻,则该空间将消失.

<div>
    <input id="unconfirmedYes" type="button" value="10%"
  /><input id="confirmedYes"   type="button" value="98% YES"
  /><input id="confirmedNo"    type="button" value="2% NO"
  /><input id="unconfirmedNo"  type="button" value="90%" />
</div>