Unknown space between links
I have three links:
<a href="/about" class="f_link"> About </a>
<a href="/Login" class="f_link"> Login </a>
<a href="/Create Account" class="f_link"> Create Account </a>
I have a CSS style for them:
.f_link{
height:38px;
padding-top:12px;
margin:0px;
color:gray;
}
.f_link:hover{
color:black;
text-decoration:none;
}
How this html is displayed in FF 3.6, IE 8 and some version of Google Chrome:
And this is how I would like it to display in my three main browsers:
I used firebug and he said that there is no padding or margin between these links. What is this place there, and how can I get rid of it? I am open to suggestions!
Line breaks should / should be considered as one empty space in HTML. You can update your markup to this (line break before the closing tag, but without a space before the next tag A)
<a href="/about" class="f_link"> About
</a><a href="/Login" class="f_link"> Login
</a><a href="/Create Account" class="f_link"> Create Account </a>
, , , ... :
About
.
HTML:
<ul class="my_list">
<li><a href="#">My Link</a></li>
<li><a href="#">My Link</a></li>
<li><a href="#">My Link</a></li>
<li><a href="#">My Link</a></li>
</ul>
CSS:
.my_list { overflow:hidden; } // Clear floats
.my_list li { float:left; list-style:none; margin:0; padding:0; }
.my_list li a { padding:0 10px; }
, .