CSS unwanted spacing between anchor-tag elements

Question

I have this stylesheet:

*{
    padding: 0px;
    margin: 0px;
}

a{

  background:yellow;

}

and this webpage:

<a href="/blog/">Home</a>
<a href="/about/">About</a>
<a href="/contact/">Contact</a>

Results in:

enter image description here

How do I make those anchor tag to "touch" each other,removing that unwanted space in-between?

thanks Luca

Newlines, in most HTML context, create a space in the rendered view. — Nightfirecat, Aug 01 '11 at 17:53

score 35 · Accepted Answer · answered Aug 01 '11 at 17:46

35

You need to remove the whitespace (in this case the newline) between your tags. Some browsers render it as a space.

answered Aug 01 '11 at 17:46

Alex Feinman

5,393
1
30
48

I thought all browsers collapse whitespace into one space character? Which ones do not do this? (I'm not trying to discredit you, I'm genuinely interested.) – JJJ Aug 01 '11 at 18:09
3

Some = all, apparently. ;) I do not have experience with every web browser, so I didn't make a sweeping statement... – Alex Feinman Aug 01 '11 at 18:56
1

That's part of the HTML standard - whitespace is condensed down to one space. – LeonardChallis Oct 01 '12 at 19:56

score 35 · Answer 2 · answered Aug 01 '11 at 18:10

35

You can use this trick to get rid of the space:

HTML:

<div id="test">
    <a href="/blog/">Home</a>
    <a href="/about/">About</a>
    <a href="/contact/">Contact</a>   
</div>

CSS:

#test { font-size:0; }
#test a { font-size:16px; background:yellow; }

Live demo: http://jsfiddle.net/quucy/

answered Aug 01 '11 at 18:10

Šime Vidas

182,163
62
281
385

14

Be careful with this code because it might be interpreted by web crawlers as abuse since you are explicitly hiding text inside an element containing links. Its true that the links itself are visible thanks to a higher specificity rule but still web crawlers see a bunch of links inside a container which tells all of its ancestors to hide their textual content. – Aug 01 '11 at 18:39
@holodoc Do you know of any articles that go into detail about this? How real is this problem? – aaaidan May 17 '12 at 22:59
1

@aaaidan That would be a good question for [Matt Cutts](http://www.youtube.com/user/GoogleWebmasterHelp) `:)` – Šime Vidas May 17 '12 at 23:08
Also I had issues with it no longer breaking up the links, they all were displayed on one line since the line breaks were 0. I make the #test element font-size: 1px; and the problem went away. – yougotiger Feb 14 '18 at 00:24

score 19 · Answer 3 · answered Aug 18 '13 at 15:29

I think I might find a pretty cool way to solve it :-). I started with the fact of using  to fill empty < span >s etc.

So if you want to keep your anchor-on-a-new-line structure and do not want the spaces between them... simply open a block comment on the end of the line and end it on the new line just before new < anchor >

Like this:

<div id="test">
    <a href="/blog/">Home</a><!--
    --><a href="/about/">About</a><!--
    --><a href="/contact/">Contact</a>   
</div>

and DEMO: http://jsfiddle.net/Lukis/reZG2/1/

Thank you for this brilliant solution! – concept47 Jul 26 '16 at 17:52 — concept47, Jul 26 '16 at 17:52

J.T. Houtenbos · Answer 4 · 2016-02-05T16:34:51.667

4

How about puting them in ul/li structure?

#test li {
    background:yellow; 
    float: left;
    list-style: none;
}

<ul id="test">
  <li><a href="/blog/">Home</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>

edited Feb 05 '16 at 16:34

answered May 15 '15 at 08:05

J.T. Houtenbos

956
7
17

I think this is actually the best solution because ul>li should be used for nav links anyway as it's best for accessibility. – Coffee bean Oct 02 '18 at 10:54
What element do you want to use in a `li` that is forbidden? I think you can use most available elements. See [the specs](https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element). The content model is 'Flow content' , which means you can use most elements available in the body. – J.T. Houtenbos Jun 05 '20 at 20:50

score 4 · Answer 5 · answered Aug 01 '11 at 17:46

The space between the links might be produced by newline characters you have in your code but it really depends in which browser you get this behavior (some browser ignore these characters some do not).

Try putting all three tags in a single line and without spaces between them.

<a href="/blog/">Home</a><a href="/about/">About</a><a href="/contact/">Contact</a>

lost-and-found · Answer 6 · 2016-09-10T22:25:50.147

All the above answers show some neat ways of getting rid of that unwanted whitespace but I don't see the one I've been using for almost a decade; so here's another simple solution to your very old problem for people who still wrestle with that whitespace -- use float!

HTML:

<div id="test">
  <a href="/blog/">Home</a>
  <a href="/about/">About</a>
  <a href="/contact/">Contact</a>   
</div>

CSS:

#test { 
  overflow:hidden; 
 /* this isn't really required here but helps; 
 or use your preferred method for clearfix  */
}

#test a { 
  float:left; 
  background: yellow;
}

jsfiddle: http://jsfiddle.net/fjj7dsyx/2/

FrankieDoodie's latest answer using flexbox is the recommended solution now IMO. — lost-and-found, Apr 12 '22 at 20:27

score 1 · Answer 7 · edited Jan 26 '21 at 21:27

1

You can use flexbox:

div {
    display: flex;
}

<div>
    <a href="/blog/">Home</a>
    <a href="/about/">About</a>
    <a href="/contact/">Contact</a>   
</div>

Or if you use Bootstrap:

<div class="d-flex">
    <a href="/blog/">Home</a>
    <a href="/about/">About</a>
    <a href="/contact/">Contact</a>   
</div>

edited Jan 26 '21 at 21:27

TheEagle

5,808
3
11
39

answered Jan 26 '21 at 16:28

FrankieDoodie

91
3

CSS unwanted spacing between anchor-tag elements

7 Answers7

Linked