Em and Rem units in CSS?-CSS Tutorial-php.cn

Em and Rem units in CSS?

PHPz

Release： 2023-08-27 13:13:10

forward

810 people have browsed it

CSS 中的 Em 与 Rem 单位？

When setting the size of an element using CSS properties, you may notice two options, one is absolute units and the other is relative units. The absolute units are the same and fixed, and you can use cm, mm, and px to set the size. Relative units, on the other hand, are relative to something else, which can be the parent element or any other element.

In this tutorial, we will look at the comparison between em and rem units in CSS.

The Em unit

The em unit makes it possible to change the size of an element relative to the font size of its parent element. This means that if the size of the parent element changes, the size of the child elements will also change.

Let’s look at an example to understand what does the em unit do.

Example

In this example, we will change the font size of the child element to 35px. The margins of the child elements will also be changed to 50px.

Here, we first create a parent element, then set its size to 17.5 pixels, and the font size of the child element to 1em, which means that the font size of the child element will be twice that of the parent element, and the element's font size will be 1em. Margins will remain unchanged. Let's take a look at the output of the code.

Note − The usage of the font-size property. The font-size is relative to the father (parent) element when it is used on other properties.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Difference between em and rem</title>
   <style>
      .father {
         paddding: 0px;
         font-size: 16px;
      }
      .son {
         margin: 1em;
         font-size: 1em;
      }
   </style>
</head>
<body>
   <div class="father">
      This is the Father element
      <div class="son">
         This is Son element
      </div>
   </div>
</body>
</html>

Copy after login

In the above output, there is a parent element and a child element. In the output, the child elements are the same size as the parent element

remunit

The unit rem is the font size relative to the root of the element, that is, the html element. If does not specify a font size, the browser's default value is used, regardless of the parent element, only the root element.

Example

We will be keeping the font size of the child element to 50px and then setting the margin of the element to 40px. The size of the rem unit will be relative for all declarations unlike em.

In the following example, we first used the root element and then created a parent element and the child element. We then set the font size of the root element to 18px and the font-size of the parent to 15px. The size of the font of the child element was then set to 1.5rem which means double the size of the root element and not the parent element. Let's look at the output to see what the rem unit does.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>The difference between em and rem units</title>
   <style>
      html {
         font-size: 18px;
      }
      .son {
         font-size: 2rem;
         margin: 1.5rem;
      }
      .father {
         font-size: 13px;
      }
   </style>
</head>
<body>
   <div class="father">
      This is parent
      <div class="son">
         This is Child in rem unit system
      </div>
   </div>
</body>
</html>

Copy after login

You can see in the above output that the child element is not the double of the parent element but it is the double of the root element.

The unit em, is relative to the font-size of its nearest parent and it can lead to the compounding effect. The rem unit, is relative to the HTML root font size but it does not lead to the compounding effect.

Em and Rem units in CSS

The units include em, vh, vw, and rem. The relative units are also known as scalable units and plays an important role in the responsiveness of the website. The em and the rem units are both scalable and relative. unit is relative to the font size of the parent element in the HTML document and the rem unit, is relative to the font root of the whole document.

Conclusion

The difference between em units and rem units is that em units are calculated relative to the parent element, while rem units are calculated relative to the root element. Both units are relative units and they help to make The website has a responsive layout. These units help set the size of specific elements.

The above is the detailed content of Em and Rem units in CSS?. For more information, please follow other related articles on the PHP Chinese website!