Question

我试图通过没有按钮标签的锚标签来创建按钮，我正在为此编写css，但它不需要使用margin-top。我的css代码是：

.btn{
     background: #881f00;
     color: #FFF;
     padding: 5px 12px;
     text-transform: uppercase;
     margin-top:20px;
    }

以上代码定义margin top可以使用按钮标签在html代码下面工作：

<button class="btn"><a href="#" class="btn">+view more</a></button>

但是，下限html标签中的margin top不起作用： -

<a href="#" class="btn">+view more</a>

我真的很困惑如何以及在何处发生这种情况。我从最近2小时谷歌搜索，但我没有得到确切的答案，所以如果有人能解决这个问题，我感到非常满意。谢谢!!!

Answer 1

a不是块级元素。尝试将display: block或display: inline-block设置为a标记，它会起作用。

默认情况下，还有其他HTML元素设置为display: inline：

Inline_elements (MDN)

Answer 2

将您的元素设置为inline-block。这将在块级元素的功能中添加最高边距功能，但将与保持在一起与其他内容：

.btn{
     background: #881f00;
     color: #FFF;
     padding: 5px 12px;
     text-transform: uppercase;
     margin-top:20px;
     display: inline-block; /*this is it*/
    }

<button class="btn"><a href="#" class="btn">+view more</a></button>
<a href="#" class="btn">+view more</a>

Answer 3

使用显示：继承，然后提供 margin-top ，它将会工作

.btn{
 background: #881f00;
 color: #FFF;
 padding: 5px 12px;
 text-transform: uppercase;
 display: inherit;
 margin-top:20px;
}

Answer 4

为按钮类添加display:block或overflow:hidden。

为什么margin top在锚标签中不起作用但在按钮中起作用？

4 个答案: