1

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>
therks
  • 499
  • 3
  • 11

1 Answers1

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.

AVAVT
  • 7,058
  • 2
  • 21
  • 44