Line height default value if font size is 100%

后端 未结 5 1691
故里飘歌
故里飘歌 2021-01-03 21:02

I must override the body style of my page:

body{
    font-size:14px;
    line-height:20px;
}

override:

body{
    font-size:         


        
相关标签:
5条回答
  • 2021-01-03 21:10

    You can use relative line-height

    If your original sizes have been font-size:14px; and line-height:20px; and you want to keep the same proportions you can use 1 * (20/14) em so line-height:1.42em;

    body{
        font-size:100%;
        line-height:1.42em;
    }
    
    0 讨论(0)
  • 2021-01-03 21:12

    The default line height is roughly ~1.1em (see here).

    You can change the relationship between the line-height and the font-size however, using for example:

    body {
        font: 100%/1.618;
    }
    

    To take a more in depth look at the relationship between line-height and font-size, a good place to start would be:
    http://demosthenes.info/blog/606/Molten-Leading-Exploring-The-CSS-Relationship-Between-Font-Size-Line-Height-and-Margin

    0 讨论(0)
  • 2021-01-03 21:18

    Values

    normal

    Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family.

    ...

    https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Values

    0 讨论(0)
  • 2021-01-03 21:26

    The default line-height is normal, so use:

    body {
        font-size: 100%;
        line-height: normal;
    }
    

    FYI, you can confirm this if you have Chrome by opening up a website, inspecting the <body> element and viewing the inherited computed styles.

    0 讨论(0)
  • 2021-01-03 21:29

    Set a unitless value of 1, which will multiply the calculated font-size (i.e. how big the font turns out to be) with 1, making for a high-enough line-height.

    You can also use 1.5 for a little more spacing.

    So to finish your code it would be

    body{
      font-size:100%;
      line-height: 1.5;
    }
    

    See the part on at https://developer.mozilla.org/en-US/docs/CSS/line-height for more details. Using a unitless number is stated as the preferred way of setting line-height.

    0 讨论(0)
提交回复
热议问题