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上使用div。

Demo

 .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'更改为您的要求。

Forked fiddle

将边距顶部或填充顶部添加到一系列显示内联div标签

3 个答案:

Demo