{"id":67281,"date":"2023-06-06T21:01:08","date_gmt":"2023-06-06T13:01:08","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=67281"},"modified":"2023-05-25T18:15:35","modified_gmt":"2023-05-25T10:15:35","slug":"css-units-guide","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-units-guide\/","title":{"rendered":"Understand Units in CSS: A Comprehensive Guide"},"content":{"rendered":"

CSS (Cascading Style Sheets) is a crucial component of modern web design. It\u2019s the language that gives your website its look and feel. But to truly master CSS, you need to understand the units it uses to measure things like length, angle, time, and resolution.<\/p>\n

\"CSS<\/figure>\n

In this guide, we take a look into each type of CSS unit, providing an explanations and practical examples to help you grasp their usage. We\u2019ll cover everything from absolute and relative length units<\/strong> like px<\/code>, em<\/code>, rem<\/code>, and viewport units<\/strong> like vw<\/code>, vh<\/code>, to more specialized units like degrees deg<\/code> for rotation, seconds s<\/code> and milliseconds ms<\/code> for animation durations, and even dots per inch dpi<\/code> for resolution.<\/p>\n

By understanding these CSS units, you\u2019ll gain more control over your layouts, leading to more precise, responsive, and visually appealing designs.<\/p>\n

\n

1. Absolute Lengths<\/h2>\n

px<\/code> (Pixels)<\/h3>\n

This is the most commonly used unit in web design. A pixel represents a single point on a computer screen.<\/p>\n

Example:<\/u> font-size: 16px;<\/code> sets the font size to 16 pixels.<\/p>\n

cm<\/code> (Centimeters)<\/h3>\n

This unit is not commonly used in web design because screen sizes and resolutions vary greatly between devices. However, it can be useful for print media.<\/p>\n

Example:<\/u> width: 10cm;<\/code> sets the width of an element to 10 centimeters.<\/p>\n

mm<\/code> (Millimeters)<\/h3>\n

Similar to centimeters, millimeters are not commonly used in web design but can be useful for print media.<\/p>\n

Example:<\/u> width: 100mm;<\/code> sets the width of an element to 100 millimeters.<\/p>\n

in<\/code> (Inches)<\/h3>\n

This unit is also more useful for print media than web design.<\/p>\n

Example:<\/u> width: 4in;<\/code> sets the width of an element to 4 inches.<\/p>\n

pt<\/code> (Points)<\/h3>\n

Points are traditionally used in print media (1 point is equal to 1\/72 of an inch). In CSS, points are useful for creating styles that can be printed with precision.<\/p>\n

Example:<\/u> font-size: 12pt;<\/code> sets the font size to 12 points.<\/p>\n

pc<\/code> (Picas)<\/h3>\n

A pica is equal to 12 points. It\u2019s another unit that\u2019s more commonly used in print than in web design.<\/p>\n

Example:<\/u> font-size: 1pc;<\/code> sets the font size to 12 points.<\/p>\n

Absolute length in CSS:<\/h3>\n

Here\u2019s an example of how these units might be used in a CSS rule:<\/p>\n

\r\ndiv {\r\n    width: 300px;\r\n    height: 20cm;\r\n    padding: 5mm;\r\n    border: 1in solid black;\r\n    font-size: 14pt;\r\n    margin: 1pc;\r\n}<\/pre>\n
Code explanation:<\/strong><\/p>\n
The div<\/code> element would have a width of 300 pixels, a height of 20 centimeters, padding of 5 millimeters, a border that\u2019s 1 inch wide, a font size of 14 points, and a margin of 1 pica.<\/p>\n
However, keep in mind that these units may render differently on different screens and devices due to varying pixel densities and screen sizes.<\/p>\n
\n
2. Relative Lengths<\/h2>\n
em<\/code><\/h3>\n
This unit is relative to the font-size of the element.<\/p>\n
Example:<\/u> If an element has a font-size of 16px, then 1em = 16px<\/code> for that element. If you set margin: 2em;<\/code>, the margin will be twice the current font size.<\/p>\n
rem<\/code><\/h3>\n
This unit is relative to the font-size of the root element (usually the <html><\/code> element). If the root element has a font-size of 20px, then 1rem = 20px<\/code> for any element on the page.<\/p>\n
Example:<\/u> font-size: 1.5rem<\/code>; will set the font size to 1.5 times the font size of the root element.<\/p>\n
ex<\/code><\/h3>\n
This unit is relative to the x-height of the current font (roughly the height of lowercase letters). It\u2019s not commonly used.<\/p>\n
ch<\/code><\/h3>\n
This unit is equal to the width of the \u201c0\u201d (zero) of the current font.<\/p>\n
Example:<\/u> width: 20ch;<\/code> will make an element 20 \u201c0\u201d characters wide.<\/p>\n
vw<\/code> (Viewport Width)<\/h3>\n
This unit is equal to 1% of the width of the viewport.<\/p>\n
Example:<\/u> width: 50vw;<\/code> will make an element 50% as wide as the viewport.<\/p>\n
vh<\/code> (Viewport Height)<\/h3>\n
This unit is equal to 1% of the height of the viewport.<\/p>\n
Example:<\/u> height: 70vh;<\/code> will make an element 70% as tall as the viewport.<\/p>\n
vmin<\/code><\/h3>\n
This unit is equal to 1% of the smaller dimension (width or height) of the viewport.<\/p>\n
Example:<\/u> font-size: 4vmin;<\/code> will set the font size to 4% of the viewport\u2019s smaller dimension.<\/p>\n
vmax<\/code><\/h3>\n
This unit is equal to 1% of the larger dimension (width or height) of the viewport.<\/p>\n
Example:<\/u> font-size: 4vmax;<\/code> will set the font size to 4% of the viewport\u2019s larger dimension.<\/p>\n
%<\/code><\/h3>\n
This unit is relative to the parent element.<\/p>\n
Example:<\/u> If you set width: 50%;<\/code>, the element will take up half the width of its parent element.<\/p>\n
Relative length  in CSS:<\/h3>\n
Here\u2019s an example of how these units might be used in a CSS rule:<\/p>\n
\r\ndiv {\r\n    font-size: 2em;\r\n    padding: 1.5rem;\r\n    width: 75vw;\r\n    height: 50vh;\r\n    margin: 5vmin;\r\n    line-height: 200%;\r\n}<\/pre>\n
Explaination:<\/strong><\/p>\n
The div<\/code> element would have a font size twice that of its parent, padding 1.5 times the root font size, width 75% of the viewport width, height 50% of the viewport height, and a margin of 5% of the viewport\u2019s smaller dimension. The line height is 200% of the current font size.<\/p>\n
\n
3. Time Units<\/h2>\n
s<\/code> (Seconds)<\/h3>\n
This unit represents a time duration in seconds. It\u2019s commonly used with animation and transition properties.<\/p>\n
Example:<\/u> animation-duration: 2s;<\/code> would make an animation last for 2 seconds.<\/p>\n
ms<\/code> (Milliseconds)<\/h3>\n
This unit represents a time duration in milliseconds, where 1000 milliseconds equals 1 second. It\u2019s also used with animation and transition properties.<\/p>\n
Example:<\/u> transition-duration: 500ms;<\/code> would make a transition last for 500 milliseconds, or half a second.<\/p>\n
Time units in CSS #1:<\/h3>\n
Here\u2019s an example of how these units might be used in a CSS rule:<\/p>\n
\r\ndiv {\r\n    transition: background-color 0.5s ease-in-out;\r\n    animation: move 2s infinite;\r\n}\r\n\r\n@keyframes move {\r\n    0% { transform: translateX(0); }\r\n    100% { transform: translateX(100px); }\r\n}<\/pre>\n
Code explanation:<\/strong><\/p>\n
The div<\/code> element would have a transition that changes the background color over 0.5 seconds, and an animation that moves the element from its current position to 100 pixels to the right over 2 seconds. The animation repeats indefinitely due to the infinite<\/code> keyword.<\/p>\n
Time units in CSS #2:<\/h3>\n
Another example could be a delay<\/em> in transition<\/code> or animation<\/code>:<\/p>\n
\r\ndiv {\r\n    transition: all 2s ease 1s; \/* transition will start after 1 second delay *\/\r\n    animation: spin 4s linear 0.5s infinite; \/* animation will start after 0.5 second delay *\/\r\n}\r\n\r\n@keyframes spin {\r\n    from { transform: rotate(0deg); }\r\n    to { transform: rotate(360deg); }\r\n}<\/pre>\n
Code explanation:<\/strong><\/p>\n
The div<\/code> element has a transition that starts after a delay of 1 second and an animation that starts after a delay of 0.5 seconds. The animation makes the div<\/code> spin indefinitely.<\/p>\n
\n
4. Resolution Units<\/h2>\n
Resolution units in CSS are used to specify the pixel density of output devices. They are primarily used in media queries to serve different styles to devices with different pixel densities.<\/p>\n
dpi<\/code> (Dots Per Inch)<\/h3>\n
This unit represents the number of pixels per inch.<\/p>\n
Example:<\/u> A a media query like @media (min-resolution: 300dpi) {...}<\/code> would apply the styles in the curly braces only to devices with a pixel density of at least 300 dots per inch.<\/p>\n
dpcm<\/code> (Dots Per Centimeter)<\/h3>\n
This unit represents the number of pixels per centimeter. It\u2019s similar to dpi, but uses centimeters instead of inches.<\/p>\n
Example:<\/u> @media (min-resolution: 118dpcm) {...}<\/code> would apply the styles to devices with a pixel density of at least 118 dots per centimeter.<\/p>\n
dppx<\/code> (Dots Per px Unit)<\/h3>\n
This unit represents the number of dots per CSS pixel unit. A CSS pixel might correspond to multiple physical pixels on a high-density display.<\/p>\n
Example:<\/u> @media (min-resolution: 2dppx) {...}<\/code> would apply the styles to devices with a pixel density of at least 2 dots per CSS pixel unit.<\/p>\n
Resolution Units in CSS: <\/h3>\n
Here\u2019s an example of how these units might be used in a CSS rule:<\/p>\n
\r\n@media (min-resolution: 2dppx) {\r\n    body {\r\n        background-image: url(\"high-res-background.png\");\r\n    }\r\n}\r\n\r\n@media (max-resolution: 1.5dppx) {\r\n    body {\r\n        background-image: url(\"low-res-background.png\");\r\n    }\r\n}<\/pre>\n
Code explanation:<\/strong><\/p>\n
Devices with a pixel density of 2 dots per CSS pixel unit or higher would use the high-resolution background image, while devices with a pixel density of 1.5 dots per CSS pixel unit or lower would use the low-resolution background image.<\/p>\n
\n
 5. Angle Units<\/h2>\n
Angle units in CSS are used to specify rotation and direction. They are often used with properties like transform<\/code> and gradient<\/code>.<\/p>\n
deg<\/code> (Degrees)<\/h3>\n
This unit represents an angle in degrees.<\/p>\n
Example:<\/p>\n
transform: rotate(45deg);<\/code> would rotate an element 45 degrees clockwise.<\/p>\n
grad<\/code> (Gradians)<\/h3>\n
This unit represents an angle in gradians, where 100 gradians equals a right angle.<\/p>\n
Example:<\/p>\n
transform: rotate(100grad);<\/code> would rotate an element 90 degrees clockwise.<\/p>\n
rad<\/code> (Radians)<\/h3>\n
This unit represents an angle in radians, where 2\u03c0 radians equals a full circle.<\/p>\n
Example:<\/p>\n
transform: rotate(3.14159rad);<\/code> would rotate an element 180 degrees.<\/p>\n
turn<\/code><\/h3>\n
This unit represents a full circle.<\/p>\n
Example:<\/p>\n
transform: rotate(0.5turn);<\/code> would rotate an element 180 degrees.<\/p>\n
Angle Units in CSS:<\/h3>\n
an example of how these units might be used in a CSS rule:<\/p>\n
\r\ndiv {\r\n    transform: rotate(45deg);\r\n}\r\n\r\ndiv:hover {\r\n    transform: rotate(0.5turn);\r\n}<\/pre>\n
Code explanation:<\/strong><\/p>\n
The div<\/code> element would be rotated 45 degrees by default. When you hover over the div<\/code>, it would rotate 180 degrees (0.5 of a full turn).<\/p>\n
\n
Bonus: Flex<\/h2>\n
fr<\/code> (Fractional Unit)<\/h3>\n
This unit is used with CSS Grid Layout and represents a fraction of the available space in the grid container. If you have a grid with two columns defined as 1fr 2fr<\/code>, the first column will take up one third of the available space, and the second column will take up two thirds.<\/p>\n
Example:<\/u><\/p>\n
\r\n.grid-container {\r\n  display: grid;\r\n  grid-template-columns: 1fr 2fr;\r\n}<\/pre>\n
The total available space is divided into 3 equal parts (1fr + 2fr = 3fr), the first column takes up 1\/3 of the space, and the second column takes up 2\/3 of the space.<\/p>","protected":false},"excerpt":{"rendered":"
Understand how to use absolute and relative lengths, angle units, time units, frequency units, and more.<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,4501],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nUnderstand Units in CSS: A Comprehensive Guide - Hongkiat<\/title>\n<meta name=\"description\" content=\"Understand how to use absolute and relative lengths, angle units, time units, frequency units, and more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css-units-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understand Units in CSS: A Comprehensive Guide\" \/>\n<meta property=\"og:description\" content=\"Understand how to use absolute and relative lengths, angle units, time units, frequency units, and more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-units-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-06T13:01:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-units-guide\/css-units-guide.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units-guide\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units-guide\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Understand Units in CSS: A Comprehensive Guide\",\"datePublished\":\"2023-06-06T13:01:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units-guide\\\/\"},\"wordCount\":1307,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-units-guide\\\/css-units-guide.jpg\",\"keywords\":[\"CSS\",\"CSS Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units-guide\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units-guide\\\/\",\"name\":\"Understand Units in CSS: A Comprehensive Guide - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-units-guide\\\/css-units-guide.jpg\",\"datePublished\":\"2023-06-06T13:01:08+00:00\",\"description\":\"Understand how to use absolute and relative lengths, angle units, time units, frequency units, and more.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units-guide\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-units-guide\\\/css-units-guide.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-units-guide\\\/css-units-guide.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Understand Units in CSS: A Comprehensive Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Understand Units in CSS: A Comprehensive Guide - Hongkiat","description":"Understand how to use absolute and relative lengths, angle units, time units, frequency units, and more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/css-units-guide\/","og_locale":"en_US","og_type":"article","og_title":"Understand Units in CSS: A Comprehensive Guide","og_description":"Understand how to use absolute and relative lengths, angle units, time units, frequency units, and more.","og_url":"https:\/\/www.hongkiat.com\/blog\/css-units-guide\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2023-06-06T13:01:08+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-units-guide\/css-units-guide.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-units-guide\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-units-guide\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Understand Units in CSS: A Comprehensive Guide","datePublished":"2023-06-06T13:01:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-units-guide\/"},"wordCount":1307,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-units-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-units-guide\/css-units-guide.jpg","keywords":["CSS","CSS Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-units-guide\/","url":"https:\/\/www.hongkiat.com\/blog\/css-units-guide\/","name":"Understand Units in CSS: A Comprehensive Guide - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-units-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-units-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-units-guide\/css-units-guide.jpg","datePublished":"2023-06-06T13:01:08+00:00","description":"Understand how to use absolute and relative lengths, angle units, time units, frequency units, and more.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-units-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-units-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-units-guide\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-units-guide\/css-units-guide.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-units-guide\/css-units-guide.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-units-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Understand Units in CSS: A Comprehensive Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-hvb","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/67281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=67281"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/67281\/revisions"}],"predecessor-version":[{"id":67283,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/67281\/revisions\/67283"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=67281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=67281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=67281"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=67281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}