Detailed explanation of some commonly used font-size font units and line-height in CSS

px(pixel)

I believe everyone is familiar with the term pixel. Next, let's introduce some small knowledge points about this unit:

Pixel is composed of the words picture and element. Pixel is not an absolute natural length unit. For example, the "natural length" of the same 1 px size is different on different devices. When you zoom in on a picture, you will find that the picture is composed of small squares, each small square is 1px. The greater the zoom, the longer the natural length of 1px. Therefore, the more pixels a picture of the same natural length contains, the clearer the picture will be.

Relative to the font size of the text in the current object. It can also be understood as a percentage unit, 1em=100%. So let's introduce what kind of effect em presents in CSS style:

If the current child element has no font size set (the browser default font size is 16px), then the child element sets the font size: font-size:1em; , then the font size of the child element is 100% of the parent element x 16px = 16px; and so on, font-size:1.5em; , the font size of the child element is 24px;

p{
    font-size:1.5em;
}
div{
    font-size:1.5em;
}
<div>
    <p>
        Font size</p>
</div>

The "font size" here is 1.5 x 1.5 x 16 = 36px

The font size of the parent element is inherited by the child element, but the inherited value is the px value, not the em value. How to understand it?

body{2em}

<body>
    <div>
        <p></p>
    </div>
</body>

Then the sub-elements div and p in body are both 32px (not overlapping)

rem

Although it is also a percentage relative to the font size, similar to em, the reference object is different. The reference object of rem is not the parent element, so no matter how the parent element changes, the font size of the element currently set to rem will not respond.

rem is relative to the root element (that is, html). When we write an html document, both head and body are wrapped by <html></html> tags.

In the css style we can also change the font-size of html

html{
    font-size:10px;
}
div{
    font-size:2rem;
}

At this point, the div's font size is 20px;

Write numbers directly in line-height in CSS style

This is wrong for font-size and will not respond.

However, in addition to the above unit settings, line-height can also be written directly without setting units.

In line-height, em is also a ratio relative to the current font size, and inherits the fixed value of px. Child elements will not inherit the value of em.

However, line-height:2; can be inherited. After the child element inherits this, the line-height value is twice the current font size.

Summarize

This is the end of this article about some commonly used font-size units and line-height in CSS. For more relevant CSS font-size and line-height content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<: How to install jupyter in docker on centos and open ports

>>: Detailed explanation of using new methods of html5 to manipulate element class names in JavaScript