How CSS line-height is measured?

by

Form MDN :

On block level elements, the line-height CSS property specifies the
minimal height of line boxes within the element.

On non-replaced inline elements, line-height specifies the height that
is used in the calculation of the line box height.

As you can see in this DEMO and the folowing image. This means that for text, line-height defines the height of the box surounding the letters vertically centered inside that box so your first example is right.

enter image description here

Image from www.w3.org

More Related Contents:

  1. What does !important mean in CSS?
  2. CSS3 selector :first-of-type with class name?
  3. SVG data image not working as a background-image in a pseudo element
  4. Using CSS for a fade-in effect on page load
  5. Why bottom:0 doesn’t work with position:sticky?
  6. what exactly is device pixel ratio?
  7. z-index is canceled by setting transform(rotate)
  8. Pure CSS checkbox image replacement
  9. Twitter Bootstrap Multilevel Dropdown Menu
  10. CSS selector for attribute names based on a wildcard
  11. Add line break to ::after or ::before pseudo-element content
  12. GWT theme style overrides my css style
  13. bootstrap button shows blue outline when clicked
  14. How can I apply styles to multiple classes at once?
  15. How to Decrease Image Brightness in CSS
  16. Why can’t I make my div 100% height if I use an HTML5 doctype? How do I get it 100% height
  17. How to create multiple borders around existing border of circle [duplicate]
  18. When setting a font-size in CSS, what is the real height of the letters?
  19. Should I use single colons (:) or double colons (::) for before, after, first-letter and first-line pseudo-elements?
  20. 3d transforms on SVG element
  21. Define an ‘s src attribute in CSS [duplicate]
  22. How to add a search box with icon to the navbar in Bootstrap 3?
  23. Is it possible to generate a box-shadow that follows the shape of a clip-path polygon?
  24. Thymeleaf + CSS+SpringBoot
  25. background-image doesn’t appear if is empty?
  26. CSS two divs width 50% in one line with line break in file [duplicate]
  27. Issue with Input & Select tag height in form
  28. Trouble (vertically) Centering Text in another DIV with relative % sizing
  29. using a div to blur an image behind it? [duplicate]
  30. CSS: clean solution to the margin collapse issue when floating an element

Leave a Comment