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

Question

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

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

我试图在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。将窗口缩小到320px宽以复制问题。

Answer 1

您遇到了问题，因为span是自然内联元素（display:inline）。如果您要将它们显示为inline-block，那么您的保证金设置将适用。

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

    display: inline-block;
}

Answer 2

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

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

Answer 3

您正在使用内联元素而不是块元素的spans，因此它们不会重新考虑margin等css样式。 将您的spans更改为divs或将广告属性display:inline-block;