Question

我正在创建一个包含姓名，职位描述和位置的列表。此列表包含30个左右的名称。我希望列表中的最后一个项目位置下面有大约20px的边距来分隔名称。所以它看起来像：

姓名
职位描述
地点


姓名
职位描述
地点


姓名
职位描述
地点


等

我也遇到了一些文字颜色问题，但主要问题是间距。

<style> .hed_Brown {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 16px;
      color: #996633;
      line-height: 18px;
      margin-left: 15px;
  }
  .hed_Green {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 16px;
      color: #7f9c99;
      line-height: 18px;
      margin-left: 15px;
  }
  .hed_Blue {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 16px;
      color: #011e41;
      line-height: 18px;
      margin-left: 15px;
      margin-bottom: 20px;
  }
  </style>

<span class="hed_Brown">Robert Mazzeo</span>
<br> <span class="hed_Green">Load Out Manager</span>
<br> <span class="hed_Blue">Lakeland FL</span>

<br> <span class="hed_Brown">WJ Mahon Jr.</span>
<br> <span class="hed_Green">Sales Manager</span>
<br> <span class="hed_Blue">Jacksonville FL</span>

<br> <span class="hed_Brown">Charles Metzger</span>
<br> <span class="hed_Green">Display Assistant</span>
<br> <span class="hed_Blue">Wichita KS</span>
<br>

Answer 1

为每个组使用容器是个好主意。例如：

<div class='contact'>
   <span class="hed_Brown">Robert Mazzeo</span>
   <br> <span class="hed_Green">Load Out Manager</span>
   <br> <span class="hed_Blue">Lakeland FL</span>
</div>

所以你可以给你想要的余量.contact。在这种情况下，您可能会添加：

.contact{
   margin-bottom:5px;
}

此外，我建议使用<div>代替<span>和<br />，因为div的display属性已经中断了。有关此内容的更多信息，请访问：SPAN vs DIV (inline-block)

Answer 2

这是一种方式：

http://jsfiddle.net/jonigiuro/GEkP8/1/

.hed_Blue {
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #011e41;
  line-height: 18px;
  margin-left: 15px;
  margin-bottom: 20px;
  display: block;
}

span元素，默认为“display：inline”，这就是你需要那些额外的

的原因

<br>

如果你声明它们“display：block”问题就解决了

Answer 3

在小提琴中，您应删除<style>代码并添加属性display: block：http://jsfiddle.net/GEkP8/2/

CSS底部保证金问题

3 个答案: