html - 2个跨度之间的间距不符合

Question

我有这个代码：

<div class="mainmenu">
    <span class="mainmenuitem">
        Item1
    </span>
    <span class="mainmenuitem">
        Item2
    </span>
</div>

我使用这个CSS：

.mainmenu{
 height:        25px;
 padding-left:  15px;   
}
.mainmenuitem{
height:             25px;
line-height:        25px;
background-color:   #F1F2F3;
text-align:         center;
padding-top:        0px;
padding-bottom:     0px;
padding-left:       5px;
padding-right:      5px;
margin-right:       1px;
margin-left:        0px;
display:            inline-block;
vertical-align:     middle;
color:              #00537B;
}

但问题是 2 个菜单项之间的空间超过 1 个像素。如何防止这种情况？如果我对一个像素使用margin-right，为什么超过1个像素之间的空间？如果我将其设为 10 像素，则它们之间的空间会增加，但仍然与 10 像素不匹配......

Answer 1

只需删除一个跨度结束和下一个跨度开始之间的代码中的空白。

例如：

</span><span class="mainmenuitem">

jsFiddle 示例

Answer 2

spans本质上是内联元素，因此它们之间的任何空格都被解析为文本。删除换行符修复它：http: //jsfiddle.net/VB8yW/

Answer 3

每当我使用display:inline-block;时，我也会float:left;在元素中添加一个。这缩小了这个差距。然后，如果我需要灵活的高度，父母会得到一个overflow:hidden;或其他类型的明确修复。