CSS <a>проблемы пограничного поля

Question

У меня здесь интересная проблема с блочной моделью. У меня есть заголовок, полный ссылок, и по какой-то причине мои поля в 0px игнорируются и отображаются как поля в 2px, окружающие каждую ссылку.

Я настроил тестовую страницу на http://www.gimmesomeoven.com/test.htm, чтобы проиллюстрировать проблему. Каждая ссылка в заголовке должна быть квадратной ссылкой 56px с границей 1px и 2px между каждой ссылкой (вместо 4, как показано). В этом случае мне пришлось устанавливать отрицательные поля для каждой ссылки, но это, конечно, не идеальный случай.

По некоторым причинам, вещи не будут отображаться правильно. Кроме того, это решение работает только в современных браузерах: IE8, Chrome, FF3 + (спасибо browsershots.org ..)

Любая помощь по этому вопросу будет принята с благодарностью. Это оказалось намного сложнее, чем я ожидал.

Answer 1

Используйте display: block вместо плавающих их.

Добавьте эти свойства в свой тег <a> для перекрестных встроенных блоков:

display: inline-block;
display: -moz-inline-box;
-moz-box-orient: vertical;
vertical-align: top;
zoom: 1;
*display: inline;

Answer 2

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

Answer 3

Похоже на дисплей: их вызывает встроенный блок. Есть какая-то конкретная причина для этого? Я попробовал (спасибо firebug)

• делает поля на 0 для #recipes a
• меняется display: inline-block на display:block для img
• добавление float: left к #recipes a

и это, кажется, желаемое решение.

Answer 4

Вот что я смог сделать, чтобы исправить вашу разметку:

Удалить это правило стиля:

#recipes a {
 padding: 0;
 margin: 0 -2px -2px 0;
 border: 1px solid #fff;}

Измените стиль .img следующим образом:

.img {
 width: 56px; 
 height: 56px;
 background: url(images/header_test.jpg) no-repeat;
 display: inline-block;
 padding: 0;
 margin: 0 -2px -2px 0;
 border: 1px solid #fff;}

Похоже, что два разных правила стиля влияли на одну и ту же группу элементов. Кроме того, убедитесь, что текст между тегами open и close якоря занимает не менее пробела, как в:

<a class="img" href="#">&nbsp;</a>