About   

Unknown space between links

I have three links:

<a href="/about" class="f_link">&nbsp;&nbsp;&nbsp;About&nbsp;&nbsp;&nbsp;</a>
<a href="/Login" class="f_link">&nbsp;&nbsp;&nbsp;Login&nbsp;&nbsp;&nbsp;</a>
<a href="/Create Account" class="f_link">&nbsp;&nbsp;&nbsp;Create Account&nbsp;&nbsp;&nbsp;</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: enter image description here

And this is how I would like it to display in my three main browsers: enter image description here

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!

+3
source share
5 answers

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">&nbsp;&nbsp;&nbsp;About&nbsp;&nbsp;&nbsp;
</a><a href="/Login" class="f_link">&nbsp;&nbsp;&nbsp;Login&nbsp;&nbsp;&nbsp;
</a><a href="/Create Account" class="f_link">&nbsp;&nbsp;&nbsp;Create Account&nbsp;&nbsp;&nbsp;</a>
+5
source

float: left; .f_link, .

http://jsfiddle.net/wMwEQ/

, &nbsp; - baaaad, .

+4

, , , ... :

&nbsp;&nbsp;&nbsp;About&nbsp;&nbsp;&nbsp;

.

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

, .

+1

- </a> <a>. , .

0

div div font-size:0;, .

fiddle

0
source

Source: https://habr.com/ru/post/1795321/


All Articles