删除 HTML、CSS 中按钮之间的空格答案

【问题标题】：Remove blank spaces between buttons in HTML, CSS删除 HTML、CSS 中按钮之间的空格
【发布时间】：2017-09-11 21:54:33
【问题描述】：

我想删除按钮之间的空格，这样当我将鼠标悬停在 NORMAL 按钮上时，它和 HARD 按钮之间就不会有空格。我该怎么做？这些空格是从哪里来的？

body {
  margin: 0;
}
#stripe {
    background-color: white;
    text-align: center;
    height: 50px;
    color: black;
}

button {
    border: none;
    background: none;
    text-transform: uppercase;
    height: 100%;
    font-weight: 700;
    color: black;
    letter-spacing: 1px;
    font-size: inherit;
    transition: all 0.3s;
    outline: none;
}

button:hover {
    color: white;
    background: black;
}

.selected {
    color: white;
    background: black;
}

<div id="stripe">
    <button class="mode">Easy</button>
    <button class="mode">Normal</button>
    <button class="mode selected">Hard</button>
</div>

【问题讨论】：

这里也有人问过这个问题：stackoverflow.com/questions/17365017/…

标签： html css button hover

【解决方案1】：

浏览器总是在一些元素之间添加空格，包括按钮。要删除这些，您需要将其父容器的字体大小设置为零。然后，要恢复按钮内的文本大小，请为它们设置 font-size。

#stripe {
  font-size: 0;
}

button {
  font-size: 14px; // Set font size that you need here
}

【讨论】：

像魅力一样工作！
点赞。但是，到目前为止，它在浏览器中对我的渲染并不相同。我还发现给字间距一个负值也是如此。它删除所有空间，它在 Chrome 上运行得最好，在 Edge 上还不错，在 Firefox 上不是很好。

【解决方案2】：

要么删除空格和回车，要么在它们之间添加 HTML 注释。

body {
  margin: 0;
}
#stripe {
    background-color: white;
    text-align: center;
    height: 50px;
    color: black;
}

button {
    border: none;
    background: none;
    text-transform: uppercase;
    height: 100%;
    font-weight: 700;
    color: black;
    letter-spacing: 1px;
    font-size: inherit;
    transition: all 0.3s;
    outline: none;
}

button:hover {
    color: white;
    background: black;
}

.selected {
    color: white;
    background: black;
}

<div id="stripe">
    <button class="mode">Easy</button><!--
    --><button class="mode">Normal</button><!--
    --><button class="mode selected">Hard</button>
</div>

【讨论】：

这些空格中的回车是如何产生的？
@HuyTran 它是一个空格字符，元素是inline-block，所以它们是内联显示的。就像您会在 HTML 中或在 <span> 标记之间看到一个 space between these words 一样，或者如果在单词/跨度之间有回车符，则会看到一个空格，您将看到设置为 inline 和 @987654327 的元素之间的空格/回车符@

【解决方案3】：

将display: flex;添加到父容器

【讨论】：

【解决方案4】：

如果使用引导程序，可以通过将 div 包装成 class="btn-group" 将按钮组合在一起。 v3.3.7 示例：https://getbootstrap.com/docs/3.3/components/#btn-groups-single

视觉上可能是也可能不是您想要的。左右两端有圆角，按钮之间有直线。可能可以重新设计。

【讨论】：