删除按钮之间的间距[重复]答案

【问题标题】：Remove spacing between buttons [duplicate]删除按钮之间的间距[重复]
【发布时间】：2021-11-17 21:46:46
【问题描述】：

所以我想删除这些按钮之间的间距。但是去掉边距是不行的。

当我进入 Inspect 时，它还说那里什么都没有，所以我不明白为什么会这样。

HTML：

* {
  margin: 0px;
  padding: 0px;
}

<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">

【问题讨论】：

标签： html css button spacing

【解决方案1】：

解决方案 1：

将display: flex; 添加到父 div。

.parent {
  display: flex;
}

<div class="parent">
  <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">
</div>

解决方案 2： 不要在 HTML 上换行。

&lt;input class="button" type="button" value="1"&gt;&lt;input class="button" type="button" value="2"&gt;&lt;input class="button" type="button" value="3"&gt;&lt;input class="button" type="button" value="4"&gt;

【讨论】：

【解决方案2】：

最简单的方法是将它们全部放在一行上：

<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">

其他选项包括使用浮动或弹性框。

【讨论】：

【解决方案3】：

浏览器总是在一些元素之间添加空格，比如按钮。要删除这些，您需要在其父容器中将 font-size 设置为零。然后，要恢复按钮内的文本大小，请在其中设置font-size。这是一个sn-p：

* {
  margin: 0px;
}

#parent {
  font-size: 0;
}

.button {
  font-size: 14px;
}

<div id="parent">
  <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">
</div>

【讨论】：