CSS - 为什么这个不可见的边距被应用于我的 <a> 标签 css-button？答案

【问题标题】：CSS - Why is this invisible margin being applied to my <a> tag css-button?CSS - 为什么这个不可见的边距被应用于我的 <a> 标签 css-button？
【发布时间】：2010-04-15 09:15:27
【问题描述】：

我在使用两种类型的按钮时遇到了问题。它基本上是一个表单按钮和一个 CSS 按钮。并且我被告知 css 按钮应该使用 display:inline-block; 这使得整个 a href 标签实际上看起来像一个按钮。但是这个无形的边缘似乎在搞砸什么。我尝试将它们分成单独的 css 类，但奇怪的是，对 css 按钮应用真正的边距也会提供额外的边距。这是什么原因造成的？

您可以在这里轻松地看到它（低图形）： www.matkalenderen.no

基本上，代码如下所示：

      <input type="submit" value="Logg inn" class="button_blue" alt="ready to login"> 
      <a class="button_css_red" href="access.php">Glemt passord</a>

CSS

.button_red, .button_blue, .button_css_red, .button_css_blue {
    background-image:url("../img/sprite_buttons.png");
    background-repeat:no-repeat;
    border: none;
    color:#FFFFFF;
    display:inline-block;
    display:inline-block;
    font-size:12px;
    height:27px;
    width:98px;
}

.button_css_red, .button_css_blue {
    margin-top:20px;
}

【问题讨论】：

您的输入标签未关闭。也许这会导致问题。通过将> 替换为/> 来关闭它。
哦，那只是我没有正确复制副本:)
奇怪的问题。但不，它不是封闭标签（或不再是封闭标签）。您可以使用 Firebug 来检查这些框，它们是独立的。
是的，这些盒子是相互独立的。唯一适用于它们的东西基本上是图形。它可能与按钮内的文本有关吗？注意红色按钮的文本与另一个按钮的高度相同。只有图形是倾斜的。

标签： html css button

【解决方案1】：

我自己找到了答案:)

看起来我可以通过应用大约 31 像素的行高来修复它。

【讨论】：

干得好，顺便喜欢这个网站。
干得好，如果您的问题已得到解决，请勾选答案框，使其不再显示为未回答。谢谢。
是的，如果它仍然没有显示为未答复，那就太好了。