Нежелательное расстояние CSS между элементами привязки-тега

Ответ 1

Вам нужно удалить пробелы (в этом случае новую строку) между вашими тегами. Некоторые браузеры отображают его как пробел.

Ответ 2

Вы можете использовать этот трюк, чтобы избавиться от пространства:

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/

Ответ 3

Я думаю, что могу найти довольно крутой способ решить эту проблему:-). Я начал с использования <!-- comments --> для заполнения пустых < span > и т.д.

Итак, если вы хотите сохранить свою структуру привязки на новой строке и не хотите, чтобы между ними были пробелы... просто откройте комментарий блока в конце строки и завершите его на новой строке просто перед новым < anchor >

Вот так:

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

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

Ответ 4

Пространство между ссылками может быть создано символами новой строки, которые у вас есть в коде, но на самом деле зависит от того, в каком браузере вы выполняете это поведение (некоторые браузеры игнорируют эти символы, а некоторые нет).

Попробуйте поместить все три тега в одну строку и без пробелов между ними.

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

Ответ 5

Как разместить их в структуре ul/li?

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

Ответ 6

Все приведенные выше ответы показывают некоторые опрятные способы избавиться от нежелательных пробелов, но я не вижу тот, который я использовал почти десять лет; так что здесь еще одно простое решение для вашей очень старой проблемы для людей, которые все еще борются с этим пробелом - использовать 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/