在标签之间添加边距不起作用，Bootstrap

Question

我想要完成的事情可以在这里找到jsbin。标签的顶部和底部之间需要一些空间，但是每当我尝试添加这样的边距时：

.label-default {
    margin-bottom: 5px;      
}

没有任何变化，也没有添加边距。如何添加边距以使它们不那么混乱？

CSS

 body {
   background-color: #2d2d30;
 }
 .categories {
   padding: 25px;
   text-align: center;
   margin:auto;
   left: 0;
   right: 0;
 }
 .panel-default {
   background-color: rgba(0,0,0,0);
   border: 0px solid;
   box-shadow: 0px;
 }
 .label-default {
   background-color: rgba(0,0,0,0.2);
   font-size: 12px;
 }
 .label-highlight {
   background-color: rgba(255,255,255,0.2);
   font-size: 12px;
 }
 .break {
   margin-top:-10px;
   display:block;
 }

超文本标记语言

<div class="panel panel-default" style='text-align:center;max-width:960px;margin:auto;left:0;right:0;'>
   <p style='color:#fefefe;font-size:24px;font-weight:300;'>How can I add padding to the bottom of each label?</p>
   <div class="panel-body">
      <span class="label label-default pad">Default</span>
      <span class="label label-default">Primary</span>
      <span class="label label-default">Success</span>
      <span class="label label-default">Info</span>
      <span class="label label-default">Warning</span>
      <span class="label label-default">Danger</span>
      <span class="label label-default">Primary</span>
      <span class="label label-default">Success</span>
      <span class="label label-default">Info</span>
      <span class="label label-highlight">Warning</span>
      <span class="label label-default">Warning</span>
      <span class="label label-default">Danger</span>
      <span class="label label-default">Default</span>
      <span class="label label-default">Default</span>
      <span class="label label-default">Primary</span>
      <span class="label label-default">Default</span>
      <span class="label label-default">Primary</span>
      <span class="label label-default">Success</span>
      <span class="label label-default">Info</span>
       ...
   </div>
</div>

Answer 1

这些“标签”是span具有display:inline.

margin-top并且margin-bottom不适用于内联元素。（请参阅此演示）

要使底部边距发挥作用，只需添加display: inline-block到标签类即可。

.label-default {
   background-color: rgba(0,0,0,0.2);
   font-size: 12px;
   display: inline-block; /* <---- */
 }

更新Jsbin