Remove padding/margin around label elements [duplicate] - html

Question

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 4 years ago.
I'm trying to skin a checkbox as a button with just HTML and CSS, similar to the BS_PUSHLIKE style in Windows. I've got a pretty good look so far, but I can't figure out how to remove some seemingly arbitrary padding/margin around the elements. This has horizontal padding between the "buttons." If I set the display of the .switch elements to table-cell, I can remove the horizontal padding, but then get a tonne of vertical padding.
:root {
--button-color: #ccc;
}
.switch {
display: inline-block;
background: var(--button-color);
vertical-align: top;
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Standard syntax */
}
.switch input {
display: none;
}
.button {
font-family: sans-serif;
border: 2px outset var(--button-color);
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 5px 10px;
}
input:checked + .button {
padding: 7px 8px 3px 12px;
border-style: inset;
background-color: rgba(255, 255, 255, 0.5);
}
<label class="switch">
<input type="checkbox">
<div class="button">Checkbox</div>
</label><br />
<label class="switch">
<input type="checkbox">
<div class="button">As</div>
</label>
<label class="switch">
<input type="checkbox">
<div class="button">Button</div>
</label><br /><br />
<label class="switch">
<input type="radio" name="example">
<div class="button">Radio</div>
</label>
<label class="switch">
<input type="radio" name="example">
<div class="button">As</div>
</label>
<label class="switch">
<input type="radio" name="example">
<div class="button">Button</div>
</label>

Answer 1

Those are the auto-converted "space" character. In HTML, any kind of white space character (space, new line, tab, etc) between 2 inline-block elements will be converted into 1 space character. In this case in the HTML there was a line break so the whitespace is inserted.
To remove those whitespaces, you can choose one of these several methods.