How to inherit CSS line-height

How to inherit CSS line-height

How is Line-height inherited?

  • Write a specific value, such as 30px, and it will inherit this value (easier to understand). Write a ratio, such as 2/1.5, and it will inherit this ratio (easier to understand).
  • For example, if the line-height in body is set to 2, then the p tag inherits the line-height of 2, and the calculated line-height of the p tag is font-size * 2 = 32px;
  • If you write a percentage, such as 200%, the calculated value will be inherited (test point) - current font-size * 200%. In the 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;
    }

Write ratio

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

Write the percentage first and then inherit!

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

This is the end of this article about how to inherit CSS line-height. For more information about CSS line-height inheritance, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  How to generate mysql primary key id (self-increment, unique and irregular)

>>:  Table td picture horizontally and vertically centered code

Recommend

JavaScript to achieve uniform animation effect

This article example shares the specific code for...

Docker setting windows storage path operation

When installing Docker on Windows 10, after selec...

A very detailed explanation of Linux C++ multi-thread synchronization

Table of contents 1. Mutex 1. Initialization of m...

Solution to the problem of crash when opening the command line window after installing MySQL 5.7

Preface I recently installed MySQL 5.7 and found ...

The most comprehensive collection of front-end interview questions

HTML+CSS 1. Understanding and knowledge of WEB st...

How to write the parent and child directories of HTML relative paths

How to indicate the parent directory ../ represent...

Notes on Using Textarea

Why mention textarea specifically? Because the tex...

A summary of the knowledge points of database indexing. Everything you need to know is here.

I believe everyone is familiar with database inde...

Interpretation and usage of various React state managers

First of all, we need to know what a state manage...

Let’s talk in detail about how JavaScript affects DOM tree construction

Table of contents Document Object Model (DOM) DOM...

Detailed explanation of HTML programming tags and document structure

The purpose of using HTML to mark up content is t...

Install Docker on Centos7 (2020 latest version available, just copy and paste)

Refer to the official documentation here for oper...

Detailed explanation of the loop form item example in Vue

Sometimes we may encounter such a requirement, th...

How to install and uninstall open-vswitch in Linux

1. Compile and install ovs from source code: Inst...

Vue integrates a rich text editor that supports image zooming and dragging

need: According to business requirements, it is n...