32

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

1
  • Newlines, in most HTML context, create a space in the rendered view. Aug 1, 2011 at 17:53

7 Answers 7

35

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

3
  • 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 1, 2011 at 18:09
  • 3
    Some = all, apparently. ;) I do not have experience with every web browser, so I didn't make a sweeping statement... Aug 1, 2011 at 18:56
  • 1
    That's part of the HTML standard - whitespace is condensed down to one space. Oct 1, 2012 at 19:56
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/

4
  • 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.
    – user188654
    Aug 1, 2011 at 18:39
  • @holodoc Do you know of any articles that go into detail about this? How real is this problem?
    – aaaidan
    May 17, 2012 at 22:59
  • 1
    @aaaidan That would be a good question for Matt Cutts :) May 17, 2012 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, 2018 at 0:24
19

I think I might find a pretty cool way to solve it :-). I started with the fact of using <!-- comments --> 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/

1
  • Thank you for this brilliant solution!
    – concept47
    Jul 26, 2016 at 17:52
4

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

2
  • I think this is actually the best solution because ul>li should be used for nav links anyway as it's best for accessibility. Oct 2, 2018 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. The content model is 'Flow content' , which means you can use most elements available in the body. Jun 5, 2020 at 20:50
2

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/

1
  • FrankieDoodie's latest answer using flexbox is the recommended solution now IMO. Apr 12, 2022 at 20: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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.