css - 你如何缩进一个元素的*每*行？

Question

我有以下 HTML 块：

<span class='instruction_text'>
  Line 1<br>
  Line 2
</span>

并且指令文本的CSS声明是：

.instruction_text {
  margin-left: 70px;
  font-style: italic;
  color: #555;
}

第一行有70px预期的边距，但下一行开始时没有缩进。如何使所有行缩进？

Answer 1

使用块级元素。 <div>默认情况下是块级的，但是将 CSS 添加display:block到您的instruction_text类应该会让您朝着正确的方向前进。

Answer 2

在 SPAN 元素中使用 BR 标记与内联元素中的 SPAN 没有多大意义，这意味着它旨在用于一行文本或其他内联元素的流中。

您确实应该使用像 DIV 或 P 这样的“块”级元素，例如设计为包含多行文本（或内联元素）的元素。

正如您会注意到的，您可以在 SPAN 中使用 BR 标签，这会导致换行，但是内联元素不能很好地处理边距/填充等。