引导程序4-为什么间距裕度类mt-3在<a> tag?

Question

I'm trying to use the spacing class mt-3 on some links to add a margin top in a page where is loaded bootstrap 4.

But the class produce no effect, I don't get any margin top.

<div class="row py-1 border-bottom">
     <div class="col-6">
          Menu voice 2
     </div>
     <div class="col-6">
         <a href="#" class="bg-success text-white p-1 mt-3">it</a>
         <a href="#" class="bg-success text-white p-1 mt-3">en</a>
         <a href="#" class="bg-success text-white p-1 mt-3">fr</a>
     </div>
</div>

In this jsfiddle上不起作用，您会看到此行为。

Answer 1

<a>标签是内联元素，因此没有空白。您可以将CSS更改为a {display: inline-block;}，也可以在Bootstrap 4中使用display utility类d-inline-block：

<a href="#" class="bg-success text-white d-inline-block p-1 mt-3">it</a>

Answer 2

这是因为链接是内联元素，您可以添加a {display: inline-block}来查看链接的边距

Answer 3

内联元素（如 <div> <div id="followers">Github followers</div> <div aria-labelledby="followers">10</div> </div> 标签）不支持边距和填充。首先将其转换为块元素以在元素中使用 div 或 <a>。