Spacing between 2 spans does not comply

Question

I have this code:

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

And I use this 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;
}

But the problem is that the space between the 2 menuitems is more than 1 pixel. How to prevent this? If I use margin-right with one pixel, why is the space between more than 1 pixel? If I make it 10 pixels the space between them increases but it still does not match 10 pixels...

It is because of [`display: inline-block`](http://stackoverflow.com/q/5256533/1577396). — Mr_Green, Apr 03 '13 at 17:24

score 0 · Accepted Answer · answered Apr 03 '13 at 16:27

0

Just remove the white space in your code between the end of one span and the start of the next.

For example:

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

jsFiddle example

answered Apr 03 '13 at 16:27

j08691

204,283
31
260
272

@Adrift - Do you need something more than newlines are counted as a space in HTML? – j08691 Apr 03 '13 at 16:35
I just tested, the newlines are counting as space when `display:inline-block` is included. – Mr_Green Apr 03 '13 at 17:43
Thanks, did not know that newlines count when using inline-block! – Mbrouwer88 Apr 03 '13 at 18:56

score 0 · Answer 2 · answered Apr 03 '13 at 16:29

0

spans are inline elements by nature, so any spaces between them are parsed as text. Removing the line break fixes it: http://jsfiddle.net/VB8yW/

answered Apr 03 '13 at 16:29

Alfred Xing

4,406
2
23
34

score 0 · Answer 3 · edited Apr 03 '13 at 17:29

0

Whenever I use display:inline-block;, I also add a float:left; to the element. This closes that gap. And then, the parent gets an overflow:hidden;, or some other kind of clear fix, if I need a flexible height.

edited Apr 03 '13 at 17:29

Mr_Green

40,727
45
159
271

answered Apr 03 '13 at 16:31

Jason Lydon

7,074
1
35
43

Spacing between 2 spans does not comply

3 Answers3