Home > Article > Web Front-end > CSS units – %, em, rem, px, vh, vw
CSS units – %, em, rem, px, vh, vw
- PHPzforward
- 2023-09-08 14:09:021310browse
In CSS or Cascading Style Sheets, there are many units that can represent the values of different properties in different ways depending on your needs. CSS properties such as: font-size, height, width and line-height are used to define different properties of the container. The values of these properties can be assigned in different units.
In this article, we will take a closer look at the different CSS units and actually implement them to understand the usage of each unit.
There are many CSS units available in CSS but in this article we only learn or discuss the following properties -
Pixel (px) - Pixel or px unit is the smallest and mainly used by beginners to set the value of different length properties. Mathematically, 1px is defined as 1/96 of an inch, i.e. 1px = 1/96 of an inch.
grammar
The following syntax will show you how to use pixel units to set the value of different length attributes -
property_name: numeric_value px;
em - The em attribute is used to set the length attribute value relative to the font size of the element. If we compare em to pixels, then we see that 1em is the same as 16px, i.e. 1em = 16px.
grammar
The following syntax will show you how to use pixel units to set the value of different length attributes -
property_name: numeric_value em;
rem - The rem attribute sets the attribute value relative to the font size of the root element in HTML (i.e. the tag). If we compare rem to pixels, then we find that 1rem is also the same as 16px, i.e. 1rem = 16px.
grammar
The following syntax will show you how to use pixel units to set the value of different length attributes -
property_name: numeric_value rem;
Note - It is recommended not to use pixels, em and rem as units when developing web pages or applications. Because, it will not allow containers in HTML to dynamically change their width and height based on the viewport size while making the web page responsive.
Viewport-width (vw) - The viewport-width or vw attribute is used to set a value based on the current viewport width of the user viewing the web page. It will allow the container to dynamically change its width based on the current viewport width of the web page.
grammar
The following syntax will show you how to use pixel units to set the value of different length attributes -
property_name: numeric_value vw;
Viewport-height (vh) - The viewport height or vh is almost similar to the viewport width property. vw is used to set the dynamic width of the element, and vh is used to set the dynamic height of the element. Every time the user changes the height, it dynamically sets the element's height relative to the current viewport height.
grammar
The following syntax will show you how to use pixel units to set the value of different length attributes -
property_name: numeric_value vh;
Percent (%) - The percentage or % attribute also sets a dynamic value to the attribute we want to assign to the element in the HTML document. Instead of using different % signs for each property like vw and vh we can use the same % sign for each property to assign a value to it.
grammar
The following syntax will show you how to use pixel units to set the value of different length attributes -
property_name: numeric_value %;
Now let us discuss each of them and understand their differences by actually implementing them with the help of code examples.
step
Step 1 - In the first step, we will define different HTML elements to set different length properties using different CSS units.
-
Step 2 - In the next step, we will define the style of the element defined in the previous step inside the
element. /head> tag. Step 3 - In the final step, we will use different CSS units to assign values to properties and see the differences between them.
Example
The examples below will help you understand the differences between all CSS units and actually understand them -
<html>
<head>
<style>
.div1 {
margin-top: 5%;
width: 50%;
height: 20%;
background-color: aqua;
}
.div2 {
margin-top: 5vh;
width: 50vw;
height: 20vh;
background-color: aqua;
}
.para1 {
font-size: 16px;
}
.para2 {
font-size: 1.2em;
}
.para3 {
font-size: 1.3rem;
}
</style>
</head>
<body>
<h2>CSS units – %, em, rem, px, vh, vw</h2>
<div class = "div1"> width: 50% <br> height: 20% </div>
<div class = "div2"> width: 50vw <br> height: 20vh </div>
<p class = "para1"> Paragraph with font-size: 16px </p>
<p class = "para2"> Paragraph with font-size: 1.2em or 19.2px </p>
<p class = "para3"> Paragraph with font-size: 1.3rem or 20.8px </p>
</body>
</html>
In the above example, we used different CSS units to specify the height, width, and font size of the element.
in conclusion
In this article, we learned about the different CSS units that can be used to set the value of the length property in CSS. We discuss them in detail by implementing them practically with the help of code examples.
The above is the detailed content of CSS units – %, em, rem, px, vh, vw. For more information, please follow other related articles on the PHP Chinese website!