“下一行”按钮之间没有空格答案

【问题标题】：No space between buttons 'on next the line'“下一行”按钮之间没有空格
【发布时间】：2013-09-24 19:16:56
【问题描述】：

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

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

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

我的 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>

我的 CSS 是：

.menuButton {
    color: #FFFFFD;
    background: #010109;
    margin: 3px 0px 3px 0px;
    padding: 1px 6px 0px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-family: 'Istok Web', sans-serif;
    font-size: 14px;
    white-space: nowrap;
}

为什么我的页面有这个问题，而不是 JSFiddle？我已经发布了（正在进行的工作）页面here。将窗口缩小到 320 像素宽以重现问题。

【问题讨论】：

通过检查其中一个按钮来查看 Chrome 开发人员工具。查看是否有另一个样式表/属性继承自该类/标记。比如你身上的线条高度。
是否有空格或者您是否将跨度格式化为下一行？
@MarkWylde：例如 div { line-height: 1; } 就足够了：jsfiddle.net/jeSeU/2

标签： html css button spacing

【解决方案1】：

您遇到问题是因为 spans 自然是内联元素 (display:inline)。如果您将它们显示为inline-block，那么您的边距设置将适用。

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

    display: inline-block;
}

【讨论】：

【解决方案2】：

您使用的是spans，它是一个内联元素，而不是块元素，因此它们不遵循css 样式，例如margin。将您的 spans 更改为 divs 或将跨度属性设置为 display:inline-block;

【讨论】：

通过将 spans 更改为 div，按钮会扩大整个宽度，这会破坏布局......

【解决方案3】：

尝试在包含的 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>

.menu {
    line-height: 1.2;
}
.menuButton {
    color: #FFFFFD;
    background: #010109;
    margin: 3px 0px 3px 0px;
    padding: 1px 6px 0px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-family: 'Istok Web', sans-serif;
    font-size: 14px;
    white-space: nowrap;
}

http://jsfiddle.net/kKQ5A/

如果这不起作用，那么我确信有另一种样式应用于导致问题的包含元素。

【讨论】：