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 id="CSS-units-em-rem-px-vh-vw">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!
Creating a Reusable Pagination Component in VueApr 22, 2025 am 11:17 AMThe idea behind most of web applications is to fetch data from the database and present it to the user in the best possible way. When we deal with data there
Using 'box shadows' and clip-path togetherApr 22, 2025 am 11:13 AMLet's do a little step-by-step of a situation where you can't quite do what seems to make sense, but you can still get it done with CSS trickery. In this
All About mailto: LinksApr 22, 2025 am 11:04 AMYou can make a garden variety anchor link () open up a new email. Let's take a little journey into this feature. It's pretty easy to use, but as with anything
It's pretty cool how Netlify CMS works with any flat file site generatorApr 22, 2025 am 11:03 AMLittle confession here: when I first saw Netlify CMS at a glance, I thought: cool, maybe I'll try that someday when I'm exploring CMSs for a new project. Then
Edge Goes Chromium: What Does it Mean for Front-End Developers?Apr 22, 2025 am 10:58 AMIn December 2018, Microsoft announced that Edge would adopt Chromium, the open source project that powers Google Chrome. Many within the industry reacted with
A Gutenburg-Powered NewsletterApr 22, 2025 am 10:57 AMI like Gutenberg, the new WordPress editor. I'm not oblivious to all the conversation around accessibility, UX, and readiness, but I know how hard it is to
Using for Menus and Dialogs is an Interesting IdeaApr 22, 2025 am 10:56 AMUsing for a menu may be an interesting idea, but perhaps not something to actually ship in production. See "More Details on "
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
SublimeText3 English version
Recommended: Win version, supports code prompts!
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
SublimeText3 Mac version
God-level code editing software (SublimeText3)
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
Atom editor mac version download
The most popular open source editor
