How to align an indented line in a span that wraps into multiple lines?
display:block;
then you've got a block element and the margin is added to all lines.
While it's true that a span is semantically not a block element, there are cases where you don't have control of the pages DOM. This answer is inteded for those.
<span>
elements are inline elements, as such layout properties such as width
or margin
don't work. You can fix that by either changing the <span>
to a block element (such as <div>
), or by using padding instead.
Note that making a span
element a block element by adding display: block;
is redundant, as a span
is by definition a otherwise style-less inline element whereas div
is an otherwise style-less block element. So the correct solution is to use a div
instead of a block-span
.