Good night, dear colleagues!

Slowly I begin to master the layout and the question is as follows: when we use a tag with text inside, for example, h1 , then by default it has small indents at the top and bottom (not the margin ). I suspect that this is the height of the line, and, probably, this place is intended for all sorts of characters with quirks from below or above, right?

Suppose if I make a font-size: 24px for the header h1 , the height of the line will also be 24px or a little more?

With a professional layout, these indents are removed or not touched?

  • Line height is line-height. The top and bottom indents are padding. - labris
  • do you know the concept of line spacing (from Word for example)? - teran
  • @labris is not, it is not the padings, there is literally a couple of pixels above and below and changing the padings doesn’t affect them at all. - TemTik
  • @teran i.e. these small indents are designed to create an interline. interval? - TemTik

1 answer 1

True, if it is simple - that place above and below is intended for tricks :)

In the web there is the concept of line height ( line-height ). It is the leading, it is the line spacing. And the text fits into lines with such heights.

You can set line-height in styles. For example, in pixels ( 24px ), or in volumes ( 1.25em ), or in a dimensionless quantity ( 1.2 ). Set for all elements ( * {} ), or for some specific ( h1 {} ).

If nothing is specified, the default row heights will be applied. Different browsers have different defaults.

Specifically for line-height - the default value for browsers is normal . It means that the browser can decide on the size of the string itself. As a rule, it will be in the range of 1.1 - 1.25, but the standard does not guarantee this, it says only that it must be “reasonable” (literally - eng. Reasonable).

Quotation source: "font-size" and "line-height" properties .

Normally defaults are reset, for example using normalize.css , and set their own font sizes and line heights. In other words - the rules of typography.

You can play with these rules, for example, on gridlover.net - move the sliders, and check the GRID button to see the grid. In the same place you can take ready CSS for your site with necessary rules of typography.

  • Suppose I did not touch the styles and did not use the normalizer. The h1 tag to which I set the size is 24px, these 24px already include these small indents at the top and bottom, or 24px will turn out the text size + 1-2 pixels from the top and bottom, and in the end it will turn out that this block is 26-28px in height? - TemTik
  • @TemTik, added the answer. By default, the browser itself decides on the height of the line. For example, in my current Google Chrome it is equal to 1.15. That is, my default line height is 1.15 times the font size. From here and it follows a couple of pixels above and below. - Vitaliy Emelyantsev
  • Thank you for the link, it turned out to be very useful, for the answer, too, thank you very much) - TemTik