Question

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

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

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

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

Answer 1

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

Answer 2

使用display: block代替浮动它们。

将这些属性添加到<a>标记以进行跨浏览内联块：

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

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

Answer 4

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

将0

#recipes a

将display: inline-block

display:block

img

将float: left添加到#recipes a

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

CSS <a> border margin issues</a>

4 个答案: