CODEWITHSUNDEEP
csspositioning
Ivan V.
Ivan V.

Reputation: 8081

Css gaps between links inside the div

CSS newbie here. Strange thing is happening, I have gaps between links, and I don't know why.

I'm using html html5 boilerplate css for reset.

HTML code:

    <div id="style-switcher">
    <a href="#" id="theme-1" data-theme="css/theme1.css">Link 1</a>
    <a href="#" id="theme-2" data-theme="css/theme2.css">Link 2</a>
    <a href="#" id="theme-3" data-theme="css/theme3.css">Link 3</a>
    <a href="#" id="theme-4" data-theme="css/theme4.css">Link 4</a>
    </div>

CSS

  #style-switcher
  {
     position: fixed;
     top:0;
     left: 0;
  }
  #style-switcher a
  {
     color: #EEEEEE;
     text-decoration: none;
     font-size: 3.3em;
     text-align: center;
     background-color: #333333;
  }

JS Fiddle: http://jsfiddle.net/RX7cg/

Upvotes: 0

Views: 120

Answers (4)

Ivan V.
Ivan V.

Reputation: 8081

I've found that the best solution is to declare font-size:0 on the parent element of the elements that are displayed as inline-block.

Upvotes: 0

Simon Arnold
Simon Arnold

Reputation: 16167

Your links elements are rendered as inline.
I suggest you add float:left; to them,
So there won't be anymore gap.
View example: http://jsfiddle.net/RX7cg/3/

Upvotes: 0

Mateusz Kocz
Mateusz Kocz

Reputation: 4602

Try adding word-spacing and letter-spacing properties: http://jsfiddle.net/RX7cg/17/

Upvotes: 0

Ben
Ben

Reputation: 11502

Like Simon says, your anchor elements are inline. That means that the spaces between the elements will render as character spaces. (It might visually look like margin but it isn't.) It's the same as the spaces between words. You can float, if that's the kind of layout you're looking for, or if you want to keep them inline you can eliminate the character spaces by rewriting your markup like this:

  <div id="style-switcher">
      <a href="#" id="theme-1" data-theme="css/theme1.css">Link 1</a
      ><a href="#" id="theme-2" data-theme="css/theme2.css">Link 2</a
      ><a href="#" id="theme-3" data-theme="css/theme3.css">Link 3</a
      ><a href="#" id="theme-4" data-theme="css/theme4.css">Link 4</a>
  </div>

Look carefully to see how the end tags have been bumped down. This pattern keep the code relatively legible. Other patterns to deal with the problem are cataloged here.

Upvotes: 1

Related Questions