How to inherit CSS line height

Time:2020-12-16

How to inherit line height?

  • Write a specific value, such as 30px, inherit the value (better understand) and write the proportion; if 2 / 1.5, inherit the proportion (better understand)
  • For example, if line height in the body is set to 2, then the P tag inherits line height to 2, then the calculated P tag line height is font size * 2 = 32px;
  • Write percentage, such as 200%, inherit the calculated value (test point) – the current font size * 200% example: 20 * 200% = 40px;

Core code demonstration:

initialization

<style>
    body{
        font-size: 20px;
    }
    p {
        background-color: #ccc;
        font-size: 16px;
    }
    </style>
</head>
<body>
    <p>This is a line of text</p>
</body>

Write specific values


  body{
        font-size: 20px;
        line-height: 50px;
    }
    p {
        background-color: #ccc;
        font-size: 16px;
    }

Writing ratio


  body{
        font-size: 20px;
        line-height: 1.5;
    }
    p {
        background-color: #ccc;
        font-size: 16px;
    }

Write percentage first and then inherit!


body{
        font-size: 20px;
        line-height: 200%;
    }
    p {
        background-color: #ccc;
        font-size: 16px;
    }

This article on how to inherit CSS line height is introduced here. For more related content of CSS line height inheritance, please search the previous articles of developeppaer or continue to browse the related articles below. I hope you can support developeppaer more in the future!

Recommended Today

How to write an avatar component with ripple effect by using react

Author: stony Chen Take a look at the final effect first, as shown in the following figure: We refer to the component effect and stylehttps://v4.mui.com/components…However, component properties are somewhat different from material UI. In addition, we also made an additional ripple effect surrounded by avatar components. List of components and attributes to be completed: Step […]