view raw
John John - 10 months ago 46
HTML Question

HTML unusual spacing between elements

I have the following menu.


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 class="profile"></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 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 ?


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.