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 example

Answer 2

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

Answer 3

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

2个跨度之间的间距不符合要求

3 个答案: