Detailed explanation of the correct way to open em in CSS

Detailed explanation of the correct way to open em in CSS

Why do we say “usually 1em=16px”?

The default text size rendered by the user's browser is "16px". In other words, the default text size of the "body" and its child elements in the web page is "16px" in the user's browser.
We all know this: em (and rem ) is a relative unit! "Relative" means:

  • Relative calculations must have a reference, so the relative here refers to font-size of the parent element. For example, if you set the font size to "16px" in a div, the descendant elements of this div will inherit its font size unless you explicitly set it again in its descendant elements. If the user changes the text size through the browser's UI controls, then our entire page will also be enlarged (or reduced), so that the entire page will not crash after the user changes the browser's font!

It's just that em is relative to the parent element, while rem is relative to the "root" element (html)

What exactly is em?

em: relative unit. Its base value is the current element's font size; the actual value depends on its (inherited) parent element.
After the author consulted the data + continuous testing, there is an "unnoticed" formula:
Target em value = target pixel value / parent element pixel value

(↑: How em is related to the parent element font-size

<body>
	I'm <p>yunxiaomeng</p>.
</body>
body{
	font-size: 16px;
}
p{
	font-size: 1.2em;
}

test1

Do you see the red frame in the picture? The actual rendered size (target pixel value) of the p tag is: 16 (px) x 1.2 = 19.2 (px)

There is one important thing to note here: if another selector/attribute on the same element uses a different font-size value to override the previous value, this will change the base value of the em in this domain!
For example, we add another attribute to the above p:

p{
	font-size: 1.2em;
	padding: 1.2em;
}

Then the actual rendered value of padding (target pixel value) = 19.2(px) x 1.2 = 23.04(px) (i.e. 16 x 1.2 x 1.2):

test2

This is why when you set em for each layer of child elements, the actual size may not seem to be what you want!
(As for why there is a margin with the same value as the font, you should refer to the "ghost blank element" mentioned in Zhang Xinxu's "CSS World"!)

Is it the same for rem? !

rem is also a relative unit, which changes relative to the root element.
It is calculated in much the same way as em. But there is a "common misunderstanding" here: Generally, we can dynamically change font-size value of the root element by the page width to make responsive adaptation:

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom = document.getElementsByTagName('html')[0];
	
window.onresize = function () {
    htmlDom.style.fontSize=htmlWidth/20+'px';
};

But many people mistakenly believe that the rem value corresponds to the "page size". In fact, this is wrong!

And now it is completely possible to make it responsive through CSS:
html { font-size: calc(112.5% + 4 * (100vw - 600px) / 400); } with media query @media

This is the end of this article on the correct way to open em in CSS. For more relevant CSS opening em 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!

<<:  Multiple ways to insert SVG into HTML pages

>>:  Detailed explanation of the 14 common HTTP status codes returned by the server

Recommend

A brief discussion on an efficient algorithm for constructing tree structures in JavaScript

Table of contents introduction Ideas Establish ID...

mysql 8.0.12 winx64 download and installation tutorial

MySQL 8.0.12 download and installation tutorial f...

You Probably Don’t Need to Use Switch Statements in JavaScript

Table of contents No switch, no complex code bloc...

Detailed steps for installing MinIO on Docker

Table of contents 1. Check whether the docker env...

Detailed explanation of Vuex overall case

Table of contents 1. Introduction 2. Advantages 3...

Introduction to root directory expansion under Linux system

1. Check Linux disk status df -lh The lsblk comma...

Three ways to achieve background blur in CSS3 (summary)

1. Normal background blur Code: <Style> htm...

The pitfalls of deploying Angular projects in Nginx

Searching online for methods to deploy Angular pr...

Briefly describe the difference between MySQL and Oracle

1. Oracle is a large database while MySQL is a sm...

Docker swarm simple tutorial

swarm three virtual machines 132,133,134 1. Initi...

Creative opening effect achieved by combining CSS 3.0 with video

Let me share with you a creative opening realized...

Create a new user in Linux and grant permissions to the specified directory

1 Create a user and specify the user's root p...

Two box models in web pages (W3C box model, IE box model)

There are two types of web page box models: 1: Sta...

mysql data insert, update and delete details

Table of contents 1. Insert 2. Update 3. Delete 1...

Pure CSS free implementation code for websites to have dark mode switching function

Preface The concept of dark mode originated from ...