css - Как убрать отступы рядом с соседними ссылками? - PullRequest
Новая
       8

css - Как убрать отступы рядом с соседними ссылками?

0 голосов
/ 13 июля 2010

Я не могу удалить заполнение рядом со ссылкой в ​​ этой странице

Я уменьшил проблему до минимума, поэтому она действительно ясна.

Я мог бы попытаться увеличить ширину элемента div, но я хочу знать, почему наличие двух элементов рядом делает общее значение шире, чем сумма частей.

Вы можете увидеть мою проблему здесь http://www.yart.com.au/stackoverflow/adjacent_a.png альтернативный текст http://www.yart.com.au/stackoverflow/adjacent_a.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>

<style type="text/css">

*
{
  padding:0;
  margin:0;
  font:15px arial;
}

div
{
 display :inline;
 background-color:Red;
 height:18px;
}


.MenuItemMove
{
  display:inline-block;
  background-image: url(http://www.yart.com.au/stackoverflow/page_move.gif);
  background-repeat:no-repeat;
  width:18px;
  height:18px;
  vertical-align:top;
}



</style>
</head>


<body>


<div>

      <a href="#" class="MenuItemMove"></a>
      <a href="#" class="MenuItemMove"></a>

</div>


</body>

</html>

Ответы [ 3 ]

2 голосов
/ 13 июля 2010

Браузеры следуют набору правил обработки пробелов, изложенных в XHTML / HTML-схеме . Э.Г.

  • Символы перевода строки в элементе блока должны быть преобразованы в пробел ...
  • Последовательность символов пробела должна быть уменьшена до одного символа пробела ...

Чтобы обойти это, воспользуйтесь обходными путями, представленными в ссылке, которую meder разместил в своем ответе.

2 голосов
/ 13 июля 2010

Вы можете перемещать элементы, так как они встроены: 

.MenuMove
{
    ...
    float: left;
}
2 голосов
/ 13 июля 2010

Это просто естественное поведение для пустого пространства между встроенными элементами. Убейте пробел в html-источнике, чтобы буквально «обойти» это:

http://work.arounds.org/unwanted-white-space-between-inline-block-elements/

...