Нежелательный интервал CSS между элементами-тегами - PullRequest
Новая
       18

Нежелательный интервал CSS между элементами-тегами

26 голосов
/ 01 августа 2011

У меня есть эта таблица стилей: 

*{
    padding: 0px;
    margin: 0px;
}

a{

  background:yellow;

}

и эта веб-страница: 

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

Результаты:

enter image description here

Как сделатьЯ делаю эти теги привязки, чтобы «касаться» друг друга, удаляя ненужное пространство между ними?

спасибо Лука

Ответы [ 6 ]

31 голосов
/ 01 августа 2011

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

27 голосов
/ 01 августа 2011

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

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

Демо: http://jsfiddle.net/quucy/

14 голосов
/ 18 августа 2013

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

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

Как это: 

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

и ДЕМО: http://jsfiddle.net/Lukis/reZG2/1/

3 голосов
/ 01 августа 2011

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

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

<a href="/blog/">Home</a><a href="/about/">About</a><a href="/contact/">Contact</a>
2 голосов
/ 15 мая 2015

Как насчет размещения их в структуре 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>
1 голос
/ 11 декабря 2015

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

...