What is the unit of em in css?

Em in CSS is a relative length unit, which is calculated relative to the font size of the element. 1em is equal to the font size of the current element. If applied to the font size, 1em will be equal to the font of the parent element. size.

# Operating system for this tutorial: Windows 10 system, Dell G3 computer.

In CSS, em is a relative length unit, which is calculated relative to the font size of the element. Specifically, 1em is equal to the font size of the current element. If applied to a font size, 1em will be equal to the font size of the parent element.

When applied to other attributes, em units will calculate relative lengths based on the element's font size. This makes the em unit very useful when implementing layout relative to text size.

Here are some examples that demonstrate the use of em units:

/* 设置段落文本的字体大小为父元素字体大小的 1.2 倍 */
p {  
font-size: 1.2em;
    }
/* 设置 div 元素的宽度为当前字体大小的两倍 */
div {  
width: 2em;
    }

It should be noted that since em is a relative length unit, it will inherit the font size of the parent element, which may cause Em values ​​in nested elements get complicated. For better control over layout, sometimes it may be more convenient to use rem units, since it is calculated relative to the font size of the root element (i.e. the html element).

The above is the detailed content of What is the unit of em in css?. For more information, please follow other related articles on the PHP Chinese website!