为什么保证金顶部在锚标签中不起作用，而是在工作中的按钮中使用

Question

我正在尝试通过无按钮标签创建锚标签按钮，我正在为此编写CSS，但它不需要保证金。我的CSS代码是：

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

上面的代码定义保证金顶部可以在HTML代码下方使用按钮标签：

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

但保证金顶部在HTML标签以下不起作用： -

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

我真的很困惑如何和何处发生。我从过去2个小时开始谷歌搜索，但是我没有得到确切的答案，所以如果有人能解决这个问题，我会感到非常满意。谢谢！

Answer 1

将您的A元素设置为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 2

a不是块级元素。尝试将display: block或display: inline-block设置为a标签，并将其工作。

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

inline_elements（mdn）

Answer 3

使用 display：sashit ，然后给出 Margin-Top ，它将工作

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

Answer 4

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