John John - 5 months ago 18
HTML Question

HTML unusual spacing between elements

I have the following menu.

topmenu

HTML code

<div class="container">
<div class="links">
<span class="link" href="#">Toate</span>
<span class="link" href="#">Online</span>
<span class="link" href="#">Noi</span>
<span class="link" href="#">Top</span>
</div>
<div class="profile"></div>
</div>


CSS Code

.topmenu {
background: #6b00f3 linear-gradient(180deg, #7f0000, #6b0103) repeat scroll 0 0;
position: fixed;
top: 0;
left: 0;
height: 48px;
width: 100%;
box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}
.topmenu .container {
height: 100%;
}
.topmenu .container .links {
height: 100%;
}
.topmenu .container .links .link {
box-sizing: border-box;
height: 100%;
text-decoration: none;
padding: 0 10px;
color: #fff;
}
.topmenu .container .links .link:not(:last-child) {
border: 1px solid #630000;
}


Now, there is a spacing between my .link elements. There is no margin, no padding.
If I copy-paste the div.links into body, the same result (with no CSS applied). If I copy only the span.link elements in the body, there is no spacing between them.
I tried adding width: auto on .links. I tried switching between and and for the .link. Tried display: inline, inline-flex, inline-block... Nothing worked!

How do I fix this ?

Answer

span is an inline element. Put them on the same line with no space between them like this:

<span class="link" href="#">Toate</span><span class="link" href="#">Online</span><span class="link" href="#">Noi</span><span class="link" href="#">Top</span>

That should remove the spacing between them.