求助：如何消除两个按钮之间的空白？附可运行代码示例

Hi Riya! 按钮之间出现空白大多是因为HTML里的换行/空格被浏览器解析成了空白字符，或是CSS默认的外边距导致的，给你几个靠谱的解决办法：

• 移除HTML中的换行与空格
  浏览器会把按钮标签之间的换行、空格解析成空白字符，直接把按钮标签连在一起就能解决：

  <button>按钮1</button><button>按钮2</button>
  

  如果想保留代码的可读性，也可以用注释把换行“吃掉”：

  <button>按钮1</button><!--
  --><button>按钮2</button>
  

• 给父容器设置font-size: 0
  空白本质是行内元素的字符间距，给按钮的父容器设置font-size: 0就能消除，记得给按钮本身恢复正常字体大小：

  .button-group {
    font-size: 0;
  }
  .button-group button {
    font-size: 16px; /* 根据你的需求调整字号 */
  }
  

• 使用Flex布局（推荐）
  给按钮的父容器启用Flex布局，它会自动忽略子元素之间的空白，同时还能轻松控制按钮的对齐方式：

  .button-group {
    display: flex;
  }
  

• 用负margin抵消空白
  如果是按钮默认的外边距导致的空白，可以用相邻选择器给后续按钮设置负的左外边距：

  button + button {
    margin-left: -4px; /* 数值根据实际空白大小调整 */
  }
  

这些方法基本能覆盖绝大多数场景，你可以根据自己的代码结构选择最适合的一种～

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