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;
 }

HTML

<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

那些＆＃39;标签＆＃39; span元素是display:inline。

margin-top和margin-bottom不参与内联元素。（见this demo）

要获得最低保证金，只需将display: inline-block添加到标签类。

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

Updated Jsbin

Answer 2

您的行高对于标签来说太小了。

将此添加到您的CSS

.label{ line-height: 25px }

在标签之间添加边距是不行的，Bootstrap

2 个答案:

Updated Jsbin