How do you indent *every* line of a <span> element?

Question

I have the following HTML chunk:

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

And the CSS declaration of instruction_text is:

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

The first line has a 70px margin as expected, but the next line starts with no indent. How can I make ALL of the lines indented?

Answer 1

Use a block-level element. <div> is block-level by default, but adding the CSS display:block to your instruction_text class should send you in the right direction.

Answer 2

Using BR tags inside a SPAN element doesn't make a lot of sense as SPAN in an inline element which means it's meant to be used in the flow of a line of text or other inline elements.

You really should be using an element that is a "block" level element like DIV or P, e.g. one that is designed to contain multiple lines of text (or inline elements).

As you'll have noticed, you CAN use a BR tag inside a SPAN and it will cause a line break, however inline elements don't play well with margins/padding etc.