3

Given the following HTML, what is total height of the <p> element? I would think that it would be 1em, but it does not appear to be so. The letters that drop below the baseline seem to sit on some kind of margin that extends below the font height.

<html>
  <head>
    <style>
      p {
        margin: 0;
        padding: 0;
        font-size: 1em;
        font-family: serif;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <p>Lorem ipsum.</p>
  </body>
</html>
hololeap
  • 1,156
  • 13
  • 20

1 Answers1

5

The height of the <p> tag is not necessarily going to be the same as font-size because each font has a built in line-height. If you need the <p> tag to be a specific height, you will need to specify it with the height or line-height property.

The other benefit of using line-height, is that you can use it along with vertical-align to vertically position your text.

EternalHour
  • 8,308
  • 6
  • 38
  • 57
  • That's incorrect. The height of the p element (when it is in its default `display:block` state) is not dependent on any "built-in" padding of the font. – Alohci Oct 06 '14 at 06:45
  • I'd be interested in seeing your answer to this question. – EternalHour Oct 06 '14 at 06:52
  • Applied your explanation in a fiddle and it looks like working.. [Fiddle](http://jsfiddle.net/venkateshwar/4yrossba/). – Mr_Green Oct 06 '14 at 07:01
  • Well, the rest of your answer is on the right lines. The OP's example is a very simple case. Assuming that the text "lorem ipsum" fits on a single line, only the font-size and the line-height are relevant. – Alohci Oct 06 '14 at 07:02
  • In more complex cases, where there are multiple inline-level boxes, or where the line-height of the container is not the same as one or more of the inline-level boxes, the effects of the vertical-align setting will also affect the height of the containing block container box. – Alohci Oct 06 '14 at 07:05
  • @Alohci I see what you're saying. – EternalHour Oct 06 '14 at 07:11
  • I should also point out that `display:inline` is different. In that case the internal metrics of the font *do* matter. See http://stackoverflow.com/questions/26041267/how-to-calculate-the-height-of-an-inline-element/26043518#26043518 for a worked example. – Alohci Oct 06 '14 at 07:18
  • Instead of “built in padding”, you should refer to default `line-height` value. Even though any `line-height` value greater than the font size causes empty space above and below each line of text, it should not be called padding, especially in the CSS context, where `padding` is a separate property. – Jukka K. Korpela Oct 06 '14 at 08:43