CSS <a> 边框边距问题答案

【问题标题】：CSS <a> border margin issuesCSS <a> 边框边距问题
【发布时间】：2016-01-16 13:26:42
【问题描述】：

我在这里遇到了一个有趣的盒子模型问题。我有一个充满链接的标题，由于某种原因，我的 0px 边距被忽略并显示为每个链接周围的 2px 边距。

我在http://www.gimmesomeoven.com/test.htm 设置了一个测试页面来说明问题。标题中的每个链接都应该是一个 56px 的方形链接，每个链接之间有 1px 的边框和 2px 的边框（而不是显示的 4 个）。在这种情况下，我不得不在每个链接上设置负边距，但这肯定不是理想的情况。

由于某种原因，无法正确渲染。此外，此解决方案仅适用于现代浏览器：IE8、Chrome、FF3+（感谢 browsershots.org..）

对此的任何帮助将不胜感激。事实证明，这比我预期的要困难得多。

【问题讨论】：

在修复实施后页面链接已被删除，作为未来的仅供参考。

标签： html css

【解决方案1】：

我认为问题在于每个<a> 之间都有空格。尝试将它们向左浮动以压缩空格，除非您想将所有代码放在 HTML 的一行中。你应该也可以摆脱负边距......你不应该在这里需要它们。

【讨论】：

【解决方案2】：

使用display: block 而不是浮动它们。

将这些属性添加到您的 <a> 标记中以实现跨浏览内联块：

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

【讨论】：

这实际上跨浏览器效果更好，但第一个是我的根本问题。

【解决方案3】：

以下是我能够修复您的标记的方法：

删除此样式规则：

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

看起来两个不同的样式规则正在影响完全相同的一组元素。此外，请确保锚点打开和关闭标记之间的文本至少是一个硬空格，如：

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

【讨论】：

【解决方案4】：

似乎显示：inline-block 导致了这些。这有什么具体原因吗？我试过了（感谢萤火虫）

为0 制作#recipes a 的边距
将display: inline-block 更改为display:block 以获取img
将float: left 添加到#recipes a

这似乎是理想的解决方案。

【讨论】：