移除按钮之间的间距，删除margin属性后无效该如何解决

问题原因 #

多个按钮之间的间距是行内块元素的默认空白符间隙导致的：<input> 属于行内块级元素，编写HTML时多个input标签之间的换行、空格会被浏览器解析为一个空白字符，最终呈现为视觉上的间距。该间距不属于margin或padding属性，所以修改margin/padding不会生效。

解决方案 #

方案1：删除HTML元素间的空白字符

直接把所有input标签写在同一行，去掉中间的换行和空格即可：

<input class="button" type="button" value="1"><input class="button" type="button" value="2"><input class="button" type="button" value="3"><input class="button" type="button" value="4">

方案2：父元素设置font-size: 0

空白符本质是文本字符，将父元素字号设为0即可消除空白符的占位，再给按钮单独设置需要的字号即可：

/* 选择器替换为按钮实际的父元素 */
.button-container {
  font-size: 0;
}
.button {
  font-size: 14px; /* 按需设置按钮文字大小 */
}

方案3：使用flex布局

给按钮的父元素开启flex布局，默认会自动消除行内元素的空白间隙：

/* 选择器替换为按钮实际的父元素 */
.button-container {
  display: flex;
}

方案4：按钮转块级后浮动

.button {
  display: block;
  float: left;
}

使用该方案需要给父元素添加清除浮动规则，避免父元素高度塌陷。

内容的提问来源于stack exchange，提问作者Tobias H.