HTML unusual spacing between elements

Question

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>
        <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 ?

Your example is entirely missing the .topmenu class, so none of your CSS will apply... is this maybe also the problem for your live page? — TheThirdMan, Jul 08 '16 at 12:51
i've added the .topmenu rules. missed them by mistake... @spekdrum that padding is for inside the link.. the borders show where the element is ending — John, Jul 08 '16 at 12:52
I'm guessing this is the normal *spacing* of inline elements, resulting from the whitespace in your html code. If so, there's a ton of ways to get rid of it, all with their own problems. E.g. remove the whitepsace, `float: left`... — Yoshi, Jul 08 '16 at 12:52
In addition of @spekdrum that you have a padding, inline elements (like ``) will be attached in the text line, so all spaces will be rendered, and yes, your line breaking and tabs are spaces too. — Marcos Pérez Gude, Jul 08 '16 at 12:52
even if i add padding: 0 the result is the same. is spacing between elements it has nothing to do with the inside of them — John, Jul 08 '16 at 12:53
No this is not inline block. this is as explained spaces between the span elements, since span is inline, spaces will apear if there are any in the html. — Arathi Sreekumar, Jul 08 '16 at 12:55

score 3 · Accepted Answer · answered Jul 08 '16 at 12:54

3

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

ToateOnlineNoiTop

That should remove the spacing between them.

answered Jul 08 '16 at 12:54

rkrishnan

776
1
9
21

this worked. waiting 6 minutes to pass to mark this answer – John Jul 08 '16 at 12:56
1

IF they're links, you should change them to `` tags. Or an inline-list with `` tags – Lee Jul 08 '16 at 12:58
More info on html blocks: http://www.w3schools.com/html/html_blocks.asp – rkrishnan Jul 08 '16 at 12:59
The REASON for this is inline elements are treated like words of text and words of text have their own whitespace between them. This is why the whitespace is generated. – Rob Jul 08 '16 at 13:17

score 1 · Answer 2 · answered Jul 08 '16 at 12:56

1

It happens because each span is on its own line, as HappyDane and rkrishnan suggests, and HTML interprets newlines as a space. If you want to keep each span on its own line, you can set font-size of the parent element to 0, and font-size of .link to 1rem (or whatever).

answered Jul 08 '16 at 12:56

Magnus Buvarp

976
7
19

No, this is not the reason. The reason is because inline elements are treated like words on a page and words are separated by whitespace. Lines have nothing to do with it. – Rob Jul 08 '16 at 13:16

score 0 · Answer 3 · answered Jul 08 '16 at 12:54

0

A little confused here about what you are after. I think your after removing the padding between the elements. Where you have added them with 'padding: 0 10px;' the second figure is left and right padding the first being vertical.

answered Jul 08 '16 at 12:54

Glenn Packer

212
1
8

score 0 · Answer 4 · answered Jul 08 '16 at 12:59

0

If you want to keep the markup you can set font-size:0; to the parent element (in this case .links) and then set the font-size for the span accordingly. This will also remove the spacing

answered Jul 08 '16 at 12:59

LS_

6,763
9
52
88

score 0 · Answer 5 · answered Jul 08 '16 at 13:08

0

Use "float:left" for the '.link' span to remove the unnecessary space in between them.

.topmenu .container .links .link {
  box-sizing: border-box;
  height: 100%;
  text-decoration: none;
  padding: 0 10px;
  color: #fff;
  float: left;
}

answered Jul 08 '16 at 13:08

Taniya

550
2
7

score 0 · Answer 6 · answered Jul 08 '16 at 13:08

This what you are looking for? I could not really understand your question.

<!DOCTYPE html>
<html>
 <head>
  <style>
   .container, .link {
     border-style: solid;
     border-width: 1px;
     background-color: red;
     float: left;
   }
  </style>
 </head>
 <body>
  <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>
 </body>
</html>

score 0 · Answer 7 · answered Jul 08 '16 at 13:11

DEMO

HTML

<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

.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;
}

Hope this helps.

score 0 · Answer 8 · answered Jul 08 '16 at 13:12

Add float:left in your CSS for .link class as following. This will float your elements to left inside parent DIV. Hence will remove spacing.

.topmenu .container .links .link {
box-sizing: border-box;
height: 100%;
text-decoration: none;
padding: 0 10px;
color: #fff;
float:left;
}

score -5 · Answer 9 · edited Jul 08 '16 at 12:53

-5

A possible quick fix for this would be to remove the spacing in the HTML code. It's a common known bug, that browsers renders it wrong.

Your HTML code would have to look 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>

There can't be any spacing between the SPAN classes.

edited Jul 08 '16 at 12:53

Marcos Pérez Gude

21,869
4
38
69

answered Jul 08 '16 at 12:52

HappyDane

1
2

3

NO!!! It's not a bug. A bug should be the opposite. – Marcos Pérez Gude Jul 08 '16 at 12:53
Are you really saying that if the HTML is `hello world`, the browser should render it as "helloworld"? – JJJ Jul 10 '16 at 10:37

HTML unusual spacing between elements

9 Answers9