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

Multi-service image packaging operation of Dockerfile under supervisor

Detailed explanation of the correct way to open em in CSS

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

What exactly is em?

Is it the same for rem? !

Multi-service image packaging operation of Dockerfile under supervisor

Database query which object contains which field method statement

Four ways to combine CSS and HTML

How to install Jenkins using Docker

What you need to know about MySQL auto-increment ID

Apply provide and inject to refresh Vue page method

Sending emails in html is easy with Mailto

Is it necessary to give alt attribute to img image tag?

Use JS to operate files (FileReader reads --node's fs)

How to use Vuex's auxiliary functions

Recommend

MySQL database optimization: index implementation principle and usage analysis

Simple use of Vue vee-validate plug-in

Sample code for implementing PC resolution adaptation in Vue

MySQL SHOW PROCESSLIST assists in the entire process of troubleshooting

HTML table tag tutorial (33): cell vertical alignment attribute VALIGN

Detailed explanation of various HTTP return status codes

Detailed explanation of the whole process and steps of installing clion on Ubuntu16.04

18 Web Usability Principles You Need to Know

Solution for VMware Workstation Pro not running on Windows

Detailed process of installing Docker, creating images, loading and running NodeJS programs

MySql 5.7.20 installation and configuration of data and my.ini files

Linux /etc/network/interfaces configuration interface method

Fabric.js implements DIY postcard function

Detailed explanation of the solution to the problem of Ubuntu system interface being too small in vmware14Pro

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