如何在5行文本的表格单元格内添加一些“空格前”间距到单行文本

Question

如果我在span元素上使用CSS line-height属性来调整特定的行，我会在问题行之前获得额外的空格，但不能使用后续CSS类重置为常规行间距。在下面的表中，请参见右下方的单元格。之前＆＃34;东京：＆＃34;我想要额外的空间 - 之前＆＃39;之后＆＃34;东京：＆＃34;我希望返回常规行间距。

td span.hard_line_break {
    line-height: 2em;
}

td span.soft_line_break {
    line-height: 1em;
}

  <table>
    <tr class="table_top row_color_A">
      <td class="bold_type td"><a href="/pdf/Terra-Publica-2014-04-Half-Day_Courses.pdf">Encroachments onto Council-Controlled Land</a></td>
      <td class="td">Councils, both urban and rural, must address encroachments on reserves, roads and lanes.</td>
      <td class="td">Brisbane:<br />Friday 23 May<br />9am&mdash;12:30pm<br />
        <span class="hard_line_break">Tokyo:</span>
        <span class="soft_line_break"><br />Tuesday 20 May</span>
      </td>
    </tr>
  </table>

查看并与之交互的整个表格HTML / CSS： http://jsfiddle.net/wideEyedPupil/3LeS6/1/

线条高度感觉它是错误的属性，但无法获得填充/边距来处理表格单元格内的span元素。请问这样做的正确方法是什么？

---

编辑： 好的，我使用div标签的建议。

Demo

Answer 1

你的意思是这样吗？

DEMO

正如您所见，也许添加css可以帮助您

更新：

DEMO 2

Answer 2

您可以使用：

.hard_line_break {
    display: block;
    margin-top: 1em;
}

在它之前和之后摆脱<br>。

Demo

Answer 3

只需在<br /><br />之前添加两个Tokyo代码，然后删除这些<span>代码。这是我能想到的最简单的解决方案。