Html 按钮之间没有空格'；在下一行'；

我试图创建圆角按钮来模拟菜单选项卡。如果屏幕不够宽，我希望按钮转到下一行

我的问题是第一行的按钮和下面几行的按钮之间没有间距：

我试图在中复制此问题，但在那里没有发生：

我的HTML是：

<div>
    <span class="menuButton">Button I Button I Button I</span>
    <span class="menuButton">Button II Button II Button II</span>
    <span class="menuButton">Button III Button III Button III</span>
</div>

---

为什么我的页面上有这个问题而不是JSFIDLE？我已经发布了（正在进行的工作）页面。将窗口缩小到320px宽以复制问题。

您之所以会遇到问题，是因为

span

s是自然内联元素（

display:inline

）。如果要将它们显示为

内联块

，则将应用边距设置

.menuButton {
    /* ... existing definitons */

    display: inline-block;
}

---

出现此问题是因为

span

s自然是内联元素（

display:inline

）。如果要将它们显示为

内联块

，则将应用边距设置

.menuButton {
    /* ... existing definitons */

    display: inline-block;
}

---

您使用的

跨越了
这是一个内联元素，而不是块元素，因此它们不会重新审视css样式，例如
边距
。
将
span
更改为
divs
或为span指定属性
display:inline块
您使用的
跨越了与块元素相反的内联元素，因此它们不会重新审视css样式，例如
边距
。
将
span
更改为
divs
或为span指定属性
display:inline块
尝试向包含的div添加一行高度：

<div class="menu">
    <span class="menuButton">Button I Button I Button I</span>
    <span class="menuButton">Button II Button II Button II</span>
    <span class="menuButton">Button III Button III Button III</span>
</div>


如果这不起作用，那么我确信有另一种样式应用于导致问题的包含元素。
尝试向包含div添加一行高度：

<div class="menu">
    <span class="menuButton">Button I Button I Button I</span>
    <span class="menuButton">Button II Button II Button II</span>
    <span class="menuButton">Button III Button III Button III</span>
</div>


如果这不起作用，那么我确信有另一种样式应用于导致问题的包含元素。
通过检查其中一个按钮查看Chrome Developer Tools。查看类/标记是否继承自另一个样式表/属性。例如，您身体上的线条高度。是否有空格，或者您是否将跨距格式化为下一行？@MarkWylde:例如a
div{line height:1；}
就足够了：通过检查其中一个按钮查看Chrome Developer Tools。查看类/标记是否继承自另一个样式表/属性。例如，你身体上的线条高度。是否有空格，或者你是否将跨距格式化为下一行？@MarkWylde:例如a
div{lineheight:1；}
就足够了：通过将跨距更改为divs，按钮会扩展整个宽度，从而破坏布局……通过将跨距更改为divs，按钮会扩展整个宽度，这打破了布局。。。。