如何移除label元素周围的padding/margin？HTML/CSS实现BS_PUSHLIKE风格按钮

嘿，我完全懂你现在的困扰——好不容易把复选框/单选框改成了类似Windows的按压式按钮，结果莫名的间距毁了整体效果，换table-cell又搞出垂直间距的新麻烦。别慌，咱们一步步搞定它！

问题根源：inline-block的空白字符坑 #

你看到的水平间距，其实是inline-block元素之间的空白字符（HTML里的换行、空格）导致的。浏览器会把这些空白当成普通空格渲染，所以按钮之间就出现了缝隙。而用display:table-cell虽然能消除这个空白问题，但table布局本身有默认的单元格间距，还会改变元素的垂直布局逻辑，自然就冒出大量垂直间距了。

最优解决方案：Flex布局 #

Flex布局是处理这类间距问题最省心的方式，既能完美消除水平空白，又能灵活控制垂直对齐。我给你调整了代码，看看效果：

:root { 
  --button-color: #ccc; 
}
/* 用flex容器包裹同一行的按钮，自动消除间距 */
.button-row {
  display: flex;
  gap: 0; /* 可以设置这个值来控制按钮之间的间距，比如5px */
  margin-bottom: 10px; /* 行与行之间的间距 */
}
.switch { 
  background: var(--button-color); 
  -webkit-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  user-select: none; 
}
.switch input { 
  display: none; 
}
.button { 
  font-family: sans-serif; 
  border: 2px outset var(--button-color); 
  padding: 5px 10px;
  /* 用flex实现垂直水平居中，替代table-cell */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer; /* 加上鼠标指针，提升交互体验 */
}
input:checked + .button { 
  padding: 7px 8px 3px 12px; 
  border-style: inset; 
  background-color: rgba(255, 255, 255, 0.5); 
}

<div class="button-row">
  <label class="switch">
    <input type="checkbox">
    <div class="button">Checkbox</div>
  </label>
</div>
<div class="button-row">
  <label class="switch">
    <input type="checkbox">
    <div class="button">As</div>
  </label>
  <label class="switch">
    <input type="checkbox">
    <div class="button">Button</div>
  </label>
</div>
<div class="button-row">
  <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>
</div>

关键修改点说明 #

1. .button-row flex容器：把同一行的按钮放在这个容器里，flex布局会自动忽略子元素之间的空白字符，彻底解决水平间距问题。gap属性还能灵活控制按钮之间的间距（如果需要留缝隙的话）。
2. 替换.button的table-cell：用display:flex配合align-items:center和justify-content:center实现文字的垂直水平居中，比table-cell更灵活，也避免了table布局带来的垂直间距问题。
3. 添加cursor:pointer：让按钮在 hover 时显示手型，符合按钮的交互预期。

备选方案（如果不想用Flex） #

如果你因为兼容性原因不想用flex，还有两个办法：

• 去掉HTML中的空白字符：把<label>标签紧密连在一起（比如</label><label class="switch">），但这样代码可读性会变差。
• 父元素设font-size:0：给按钮的父元素（比如body或者包裹容器）设置font-size:0，然后在.switch里重置font-size:16px（或你需要的大小），这样空白字符就不会占空间了。

试试上面的flex方案，应该能完美达到你想要的BS_PUSHLIKE风格，而且间距问题彻底解决！

内容的提问来源于stack exchange，提问作者therks