How do you indent *every* line of a <span> element?
-
22-09-2019 - |
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?
Solution
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.
OTHER TIPS
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.