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

How to use the dig/nslookup command to view DNS resolution steps

dig - DNS lookup utility When a domain name acces...

Building FastDFS file system in Docker (multi-image tutorial)

Table of contents About FastDFS 1. Search for ima...

MySQL concurrency control principle knowledge points

Mysql is a mainstream open source relational data...

Solve the problem of mysql data loss when docker restarts redis

Official documentation: So mysql should be starte...

How to use JS to check if an element is within the viewport

Preface Share two methods to monitor whether an e...

Faint: "Use web2.0 to create standard-compliant pages"

Today someone talked to me about a website develo...

This article will help you understand JavaScript variables and data types

Table of contents Preface: Kind tips: variable 1....

Detailed explanation of Docker Secret management and use

1. What is Docker Secret 1. Scenario display We k...

A brief discussion on what situations in MySQL will cause index failure

Here are some tips from training institutions and...

Hyper-V Introduction and Installation and Use (Detailed Illustrations)

Preface: As a giant in the IT industry, Microsoft...

Detailed explanation of the installation and configuration of ROS in CLion2020.1.3 under ubuntu20.04

1. Download, install and activate CLion Just foll...

Example of how to start a container with multiple network interfaces using docker

Adding a network interface to the container 1 Run...

JS native 2048 game source code sharing (the latest on the Internet)

I have been learning about algorithms recently an...

Solution to ERROR 1366 when entering Chinese in MySQL

The following error occurs when entering Chinese ...

Detailed steps to build a file server in Windows Server 2012

The file server is one of the most commonly used ...