On usage of <br> tag line-height does not work. Why?

Question

<div style="line-height:25px;">
First line of the content<br />
Second line of the content<br />
Third line of the content<br />
</div>

On usage of break tag in a <div>, the line-height property is not working with any of the attributes:

line-height:20px;
line-height:100%;
line-height:1.5;

Now the three lines are displayed with default line height and not with the specified line-height 25px. But if the <div> contains no break tag between the lines, the line height works. How to override this?

Answer 1

Since <br /> is an inline element, you need to apply line-height to a block element such as <p>.

<p style="line-height: 20px;">
This is some text<br />with a break tag.
</p>

You want to look at this question regarding turning <br /> into a block element.