Как сделать отступ для * каждой * строки элемента <span>?

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

Использование тегов BR внутри элемента SPAN не имеет большого смысла, поскольку SPAN для встроенного элемента означает, что он предназначен для использования в потоке строки текста или других встроенных элементов.

Вы действительно должны использовать элемент, который является элементом уровня "блок", такой как DIV или P, например тот, который предназначен для содержания нескольких строк текста (или встроенных элементов).

Как вы уже заметили, вы можете использовать тег BR внутри SPAN, и это приведет к разрыву строки, однако встроенные элементы не очень хорошо работают с полями / отступами и т. Д.