Hey.

CSS question. I wrote <strong style="font-size: 24px;font-family:arial;">Ёу</strong> , and then I opened the devtuls and selected this line element. Got it:

enter image description here

  1. I do not understand what this selected area? What is 26 pixels when I specified 24 pixels? . The line element has a line block (equal to the height of the line-height), there is a content area (equal to the font-size), and there is a container line.

Model 1

enter image description here

  1. The item has a content area — this is from the container model. As far as I understand, the container model also extends to lowercase elements, since the same margin, border, padding can be set for the lowercase element. How do these two models interact?

Model 2

enter image description here

The container model has a "content area" and the pure-line element model has a content area (its height is defined as font-size).

  • To set the height of the line element, use the line-height - Vadim Prokopchuk

3 answers 3

  1. The point is line-height (line spacing), look at how many devtuls are set for this element should be line-height: 1.3; (depends on the type and size of the font)
  2. Read line-height
  • if I write, for example, line-height: 24px, then when selecting a block, it shows 17.7 pixels - Dimon
  • 2
    codepen.io/Mitrandil/pen/mRBadP The font-size font is an abstract value that is attached to a font and is given for typographical purposes. It is usually equal to the distance from the upper limit of the letters to the lowest, excluding the "lower tails" of letters, such as p, y. As you can see from the example above, if the size of the line is equal to the font-size, the line will not be exactly the size “under the letter”. Depending on the font, the “tails” of the letters may come out, the letters p, y in the example above just set those extra pixels for the block that are not clear to you. Usually the size of the line is slightly larger than the font. - Daria
  • setting line-height instead of font-size does not solve the problem. all the same, the content area is obtained in pixels more than the specified line-height. the fact that in your example it is encircled with a red frame is a container of lines. and they are calculated somehow incomprehensibly - Dimon
  • I edited the example, because of the strong tag (the browser adds font-weight: bold (700);), the frame is longer by 2px, the other frames are equal to line-height: 24px. The default font-weight value is norma (400); set by the browser. Read: htmlbook.ru/css/font-weight - Daria
  • If you write <span style = "font-size: 24px; font-family: arial;"> You </ span>, it will be the same. it's not - Dimon
  1. The font-size property sets the point size vertically. line-height is 120 percent of font-size ( https://developer.mozilla.org/en-US/docs/Web/CSS/line-height ).

enter image description here

  1. The height of the character with this vertical size of the size is determined by the manufacturer of the font. enter image description here
  • It is advisable to add a link to the specification, which says about 120%. - Qwertiy ♦
  • I will add a link about 120 percent - Dimon
  1. The font-size property sets the size of the kegel square in height.
  2. Then the font is taken, which corresponds to this bowling square in height. Font glyphs can crawl over these kegel squares .
  3. In Devultus, the content area of ​​the string element is highlighted in blue. This is a rectangle. According to Eric Meyer’s “CSS” book, in CSS 2.1 (page 216 of the book) there are two options for how the content area is formed : which is defined, as already written, by the font-size property. b) The content area is the smallest rectangle that covers all the glyphs of a row in height. Browsers use this particular method of determining the content area . Font glyphs are larger than the point size (which font-size defines), therefore the content-area (the smallest rectangle that covers glyphs) is larger than the font-size