Как вы отступаете * каждую * строку элемента <span>?

У меня есть следующий фрагмент HTML:

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

И объявление CSS инструкции_text:

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

Первая строка имеет маркер 70px, как и ожидалось, но следующая строка начинается без отступа. Как заставить ВСЕ строки отступать?

Ответ 1

Используйте элемент уровня блока. <div> по умолчанию является блочным уровнем, но добавление CSS display:block в класс instruction_text должно отправить вас в правильном направлении.

Ответ 2

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

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

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