菜单标签内的空白？

Question

为什么我的标签之间有差距？

每个标签的css是：

    .tab1
{
    color: white;
    display: inline-block;
    height: 110px;
    width: 234px;
    background-image: url("../images/first-tab.png");
    background-repeat:no-repeat;
}

.tab2
{
    color: white;
    display: inline-block;
    height: 110px;
    width: 234px;
    background-image: url("../images/second-tab.png");
    background-repeat:no-repeat;
}

.tab3
{
    color: white;
    display: inline-block;
    height: 110px;
    width: 234px;
    background-image: url("../images/last-tab.png");
    background-repeat:no-repeat;
}

Answer 1

你的标签inline-block和thuis的处理方式几乎与inline相同，这意味着它们之间的空格是html-source中它们之间的空格（空格，制表符或换行符）。

这会给你“差距”：

<div class="tab1">Content here</div>
<div class="tab2">Content here</div>
<div class="tab3">Content here</div>

这不会：

<div class="tab1">Content here</div><div class="tab2">Content here</div><div class="tab3">Content here</div>

这也不会：

<div class="tab1">
    Content here
</div><div class="tab2">
    Content here
</div><div class="tab3">
    Content here
</div>

更改此内容，更新您的html-source并删除空白或（更好）更改您的CSS以使用block - 元素和float:left（可能导致其他问题，但很难说，因为你没有给你的html源代码）

Answer 2

由于它们是内联块，如果在html中它们之间存在实际的空格，它们之间会显示单个文本空间，因此要么删除html中的空格（丑陋的html），要么想到另一种解决方案以这种方式显示元素（例如漂浮）。

Answer 3

你使用什么HTML？大多数元素都有默认的填充/边距。在大多数情况下，您必须覆盖这些。尝试“margin：0; padding：0;”删除它们或添加你的html示例。