why margin top does not work in anchor tag but in button in works?

Question

I am trying to create the button by anchor tag without button tag and I am writing css for that but it's doesn't take margin-top. My css code is:

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

Above code define margin top can be work in below html code with button tags:

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

But margin top does not work in below html tags:-

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

I am really confused how and where this can be happened. I am googling from last 2 hr but I don't get the exact answer so I feel greatfull if anyone can solve this issue. Thank you!!!

Answer 1

Set your a element to be inline-block. This will add, among the capabilities of the block level elements, the top margin capability, yet keep it in line with the rest of your content:

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