Remove spacing between buttons [duplicate]-CodePudding

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

CodePudding user response：

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

CodePudding user response：

In the style give float: left just as follows

<style type=""> *{float: left;}</style>

CodePudding user response：

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.

CodePudding user response：

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>

Hope this helped!