Does anyone have an idea how to align the second line?
span.info {_x000D_
margin-left: 10px;_x000D_
color: #b1b1b1;_x000D_
font-size: 11px;_x000D_
font-style: italic;_x000D_
font-weight: bold;_x000D_
}<span class="info"></span>The answer is
span is a inline element which means if you use <br/> it'll b considered as one line anyway.
Change span to a block element or add display:block to your class.
You want multiple lines of text indented on the left. Try the following:
CSS:
div.info {
margin-left: 10px;
}
span.info {
color: #b1b1b1;
font-size: 11px;
font-style: italic;
font-weight:bold;
}
HTML:
<div class="info"><span class="info">blah blah <br/> blah blah</span></div>
Also you can try to use
display:inline-block;
if you would like the span element to align horizontally.
Incase you would like to align span elements vertically, just use
display:block;
<!DOCTYPE html>
<html>
<body>
<span style="white-space:pre-wrap;">
Line no one
Line no two
And many more line.
This is Manik
End of Line
</span>
</body>
</html>
try to add display: block; (or replace the <span> by a <div>) (note that this could cause other problems becuase a <span> is inline by default - but you havn't posted the rest of your html)
<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.
Source: Stackoverflow.com