Why the
element has more height than line-height

Question

I am having a weird problem , either I don't know how   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   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.

Unrelated: [Do I need a "/" at the end of an or
tag, etc.?](http://stackoverflow.com/questions/15149641/do-i-need-a-at-the-end-of-an-img-or-br-tag-etc) — Danny Beckett, Sep 26 '13 at 07:33
pleeeeeaaase, do not just link to a page to let us view the problem there, write up sample code `INTO YOUR POST`, because as soon as you have fixed this on your site (hopefully soon), this question will become useless to others. — DrCopyPaste, Sep 26 '13 at 07:33
no its not, jsfiddle is a nice additive, but fiddles might get deleted or be unavailable at some time, too ;) — DrCopyPaste, Sep 26 '13 at 07:35
"According to paint.net", I strongly recommend that u start to learn proper tools. Use firebug for firefox and default web inspector for chrome. In those addons u can see elements dimensions without the need to calc them for yourself — DarkBee, Sep 26 '13 at 07:36
The post is not about tools I know I shouldn't use paint dot net but still it doesn't change the fact that space is too much see for your self @DarkBee — Ahmar Ali, Sep 26 '13 at 07:38
The code in the question does not match the code in the linked page. — Jukka K. Korpela, Sep 26 '13 at 08:51

DrCopyPaste · Accepted Answer · 2013-09-26T08:05:55.400

Seems perfectly fine to me... if you get rid of one of the  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   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...

score 0 · Answer 2 · answered Sep 26 '13 at 07:38

0

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

br{
    display: block;
    height: 0;
}

demo

answered Sep 26 '13 at 07:38

Bhojendra Rauniyar

83,432
35
168
231

score 0 · Answer 3 · edited Sep 26 '13 at 08:14

0

The   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  tags for every line, in which you can control the height.

   jsfiddle.net/efortis/f6ju2/

edited Sep 26 '13 at 08:14

Community

1
1

answered Sep 26 '13 at 07:41

Satyam Saxena

581
2
10

Why the element has more height than line-height

3 Answers3

Why the
element has more height than line-height