html - 向一系列显示内联 div 标签添加 margin top 或 padding top

Question

我正在尝试设置我的示例代码，以使第二行在顶部不会那么拥挤。我不能将它们分成 2 行，所以我需要一种方法来在每个 div 的顶部添加某种填充，以便有一点喘息的空间。

下面是我试过的代码，我还添加了一个 jsfiddle

HTML:

<div class="container">
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
     <div class="item red">TEXT</div>
</div>

CSS:

 .container{
     width:500px;
 }
 .item{
     width:90px; 
     height:20px;
     display:inline;
     margin-right:10px;
     padding-top:15px;
 }
 .red{
     background-color:#B222222;
 }

Answer 1

在许多其他 CSS 属性中，边距不适用于具有 display: inline 的对象。

改用inline-block，或者display: block 和float: left 一起使用。