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 imitates Jingdong magnifying glass effect

This article shares the specific code for JavaScr...

Python virtual environment installation and uninstallation methods and problems encountered

Ubuntu16.04 install and uninstall pip Experimenta...

ReactJs Basics Tutorial - Essential Edition

Table of contents 1. Introduction to ReactJS 2. U...

The basic use of html includes links, style sheets, span and div, etc.

1. Links Hypertext links are very important in HTM...

Vue implements nested routing method example

1. Nested routing is also called sub-routing. In ...

Sample code for implementing two-way authentication with Nginx+SSL

First create a directory cd /etc/nginx mkdir ssl ...

Full steps to create a password generator using Node.js

Table of contents 1. Preparation 2. Writing comma...

How to configure Hexo and GitHub to bind a custom domain name under Windows 10

Hexo binds a custom domain name to GitHub under W...

Solution to the problem of being unable to access the Internet after Ubuntu restarts in VMWare

How to solve the problem of being unable to acces...

Detailed explanation of Mybatis special character processing

Preface: Mybatis special character processing, pr...

mysql replace part of the field content and mysql replace function replace()

[mysql] replace usage (replace part of the conten...

Detailed explanation of the application of Docker Swarm in continuous integration testing

background The Agile model is widely used, and te...

HTML Tutorial: Collection of commonly used HTML tags (5)

These introduced HTML tags do not necessarily ful...

How to quickly deploy Redis as a Docker container

Table of contents getting Started Data storage Co...

Detailed understanding and comparative analysis of servers Apache, Tomcat and Nginx

1 Question The company's server uses Apache, ...