CODEWITHSUNDEEP
htmlcss
Ahmar Ali
Ahmar Ali

Reputation: 1068

Why the <br> element has more height than line-height

I am having a weird problem , either I don't know how <br/> works or I am missing something here.My paragraphs have line height of 24px. I want to have a line break (empty line) between the text but when I use <br/> tag it creates an empty line with too much space (36 px) according to paint.net so what I am doing wrong?

Isn't line break supposed to have same height as line-height property? If yes why isn't that working and if not then what is the solution?

<p>
   Greenfields Counselling and Psychotherapy is a counselling practice that lives and works out of the principles for counselling and psychotherapy as set down by Carl Rogers.
  <br/>
  <br/>
  Counselling at Greenfields is strictly confidential and we understand that this can be a difficult time for you.
</p>

Here is the css:

p {
  line-height: 24px;
}

Here is the demo: http://contestlancer.com/greenFields/?page_id=41 Look at the space after the word happen.

Ahmar.

Upvotes: 0

Views: 952

Answers (3)

Satyam Saxena
Satyam Saxena

Reputation: 571

The <br /> tag is for line breaks. You can use the CSS line-height property to control distance between lines, if you want to look at it that way.

for large distances between lines, is better to use <p> tags for every line, in which you can control the height.

   jsfiddle.net/efortis/f6ju2/

Upvotes: 0

DrCopyPaste
DrCopyPaste

Reputation: 4117

Seems perfectly fine to me... if you get rid of one of the <br>s I measured distance between "facilitate"'s f and "Counseling"'s C to be 13px. If I put it back in again it is 37px.

37px - 13px = 24px = the line-height you set = everything is okay ;)

(measuring done via Greenshot ;))

So if you are not satisfied with the height of your <br> you should add a special condition for that to your css:

br
{
    line-height: <desired_value>;
}

PS: So to clarify further, line-height is not the same as the space between two letters in two lines...

Upvotes: 3

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You can remove that line-height spacing by this technique.

br{
    display: block;
    height: 0;
}

demo

Upvotes: 0

Related Questions