html - 为一系列显示内联 div 标签添加上边距或上边距

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.

Answer 2

display:inline-block;在.item divs上使用。

演示

 .item{
     width:90px; 
     height:20px;
     display:inline-block;
     margin-right:10px;
     margin-top:15px;
 }

边距不适用于非块元素。

Answer 3

您应该能够添加一些空间，例如line-height：.container div

.container {
  width:500px;
  line-height:2;
}

将值“2”更改为您的要求。

分叉的小提琴。