Remove spacing between buttons

Question

so I would like to remove the spacing between these buttons. But removing the margin doesn't do it.

When I go into Inspect, it also says that there is nothing there, so I don't get why it does this.

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

score -1 · Answer 1 · answered Sep 24 '21 at 16:18

Solution 1:

Add display: flex; to parent 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>

Solution 2: Don't break line on HTML.

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

score -2 · Answer 2 · answered Sep 24 '21 at 16:22

The simplest way is to put them all on one line:

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

Other options include using floats or flexbox.

score -2 · Answer 3 · edited Oct 14 '21 at 18:34

Browsers always add spaces between some elements, like buttons. To remove these, you need to set font-size to zero, in their parent container. Then, to restore text size inside buttons, set font-size in them. Here's a snippet:

* {
  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>

Remove spacing between buttons

3 Answers3