{"id":18125,"date":"2020-10-27T23:31:58","date_gmt":"2020-10-27T15:31:58","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18125"},"modified":"2023-05-19T22:44:44","modified_gmt":"2023-05-19T14:44:44","slug":"css-units","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-units\/","title":{"rendered":"A Look Into CSS Units: Pixels, EM, and Percentage"},"content":{"rendered":"<p>Unit takes an important role for measuring and building things like a house, a bridge or a tower, and building a website is not an exception. There are a number of methods of measurements used on the Web, specifically in CSS, namely <strong>Pixel, EM and Percentage<\/strong>.<\/p>\n<p>In this post, we are going to run through these units to get further insight into these units of measurements.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/css-viewport-units-vw-vh-wmin-vmax\/\" class=\"ref-block__link\" title=\"Read More: Guide to CSS Viewport Units: vw, vh, vmin, vmax\" rel=\"bookmark\"><span class=\"screen-reader-text\">Guide to CSS Viewport Units: vw, vh, vmin, vmax<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-viewport-units-vw-vh-wmin-vmax.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-30172 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-viewport-units-vw-vh-wmin-vmax.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Guide to CSS Viewport Units: vw, vh, vmin, vmax<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tViewport-percentage lengths, or viewport units as they are more frequently referred to, are responsive CSS units that allow...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>PX<\/h2>\n<p>Pixel is a fixed unit measurement and the smallest unit on screen measurement but don\u2019t confuse this with the Pixel that defines screen resolution. The Pixel in CSS has nothing to do with the screen resolution.<\/p>\n<p>When we try viewing a web page fixed at <strong>1024px<\/strong> width say on a tablet with <strong>1024px by 480px<\/strong> screen resolution, the web page will not fit in the screen.<\/p>\n<p>I\u2019ve been experiencing this issue in the past and found out that the Pixel in CSS is actually not a linear unit \u2013 it is in fact a radial measurement.<\/p>\n<p>Basically, the Pixel in CSS measures the length of the display area instead of the screen resolution, so the <strong>1024px screen resolution does not mean that the screen is also 1024px<\/strong> of the length.<\/p>\n<h2>More On PX<\/h2>\n<p>I\u2019m not an expert on the technicalities in this matter but if you know <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Trigonometry\">Trigonometry<\/a>, and want to find out more, check out the following explanation from <strong>Sean B. Plamer<\/strong>: <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/inamidst.com\/stuff\/notes\/css\">CSS px is an Angular Measurement<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-units\/rad-px.jpg\" alt=\"css-units\" width=\"500\" height=\"280\"><\/figure>\n<h2>Finding The Display Area<\/h2>\n<p>So, how do we find the actual display area of a device? Luckily, there is a handy special calculator to <strong>roughly estimate<\/strong> the display area in format of Pixel, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.unitconverters.net\/typography\/centimeter-to-pixel-x.htm\">CM to PX<\/a>.<\/p>\n<p>We simply need the length of the device in <code>cm<\/code> and the PPI (Point Per Inch) \/ DPI (Dot Per Inch) which you can get these from the device box. With this, it turns out that the tablet I used is merely <code>953px<\/code>in length.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-units\/cm-to-px.jpg\" alt=\"css-units\" width=\"500\" height=\"280\"><\/figure>\n<p class=\"note\"><strong>Recommended Reading:<\/strong> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/alistapart.com\/articles\/a-pixel-identity-crisis\/\">Pixel Identity Crisis<\/a><\/p>\n<h2>Pixels Font Size in Photoshop<\/h2>\n<p>When working on Photoshop, we will find that the font size is by default set to <strong>Pt (Points)<\/strong>. The Pt unit is ideal for print styles.<\/p>\n<p>To not confuse this with <code>px<\/code> when we are translating it to Web documents, we can change the units from the following menu: <strong>Edit &gt; Preferences &gt; Units and Rulers<\/strong>.<\/p>\n<p>There, you get a window option as shown in this screenshot below. Choose \u2018pixels\u2019 for the Type unit.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-units\/units-rulers.jpg\" alt=\"css-units\" width=\"500\" height=\"280\"><\/figure>\n<p>And, we have px for the font size.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-units\/px-font-menu.jpg\" alt=\"css-units\" width=\"500\" height=\"69\"><\/figure>\n<h2>EM<\/h2>\n<p>EM is a relative measurement. In CSS, EM refers to the multiplication of the default font size from the device or the document itself, that is why I personally word EM as <strong>EMphasize<\/strong>, but of course don\u2019t take my word for it.<\/p>\n<p>Here is an example; let\u2019s say in a document, the font size is assigned for is <code>16px<\/code>. <code>1em<\/code> is equal to <code>16px<\/code>, <code>2em<\/code> is equal to <code>32px<\/code> and so on.<\/p>\n<p>Although EM is traditionally used for font sizing and in fact it is the standard unit used in browser styles for measuring font size, we can also used EM to define an element\u2019s length.<\/p>\n<p>The only constraint when working with EM unit is it is not quite intuitive, but there are two practical ways we can handle this. First, we can use this calculator, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/pxtoem.com\/\">PX to EM<\/a>; it\u2019s a handy calculator that I use often.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-units\/px-to-em.jpg\" alt=\"css-units\" width=\"500\" height=\"350\"><\/figure>\n<p>Another way is to set the document pixel base to <code>10px<\/code>, so we can calculate it more easily; for instance setting <code>15px<\/code> at <code>1.5em<\/code>. Well, I hope you get the basic idea with this example.<\/p>\n<h2>Percentage<\/h2>\n<p>It is more straightforward with percentage, which measures relatively to the parent length. When the parent width is <code>800px<\/code> then <code>50%<\/code> would become <code>400px<\/code>. In recent years, as <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/rwd\/\">Responsive Design<\/a> starts becoming the web design standard, percentage unit is adapted more frequently in the wild.<\/p>\n<p>Alright, let\u2019s take a look at the following example; this code below defines <code>.container<\/code> and <code>.main<\/code> class selector with <code>60%<\/code> for the width, but these classes refer to different parents thus they generate different lengths.<\/p>\n<p>The <code>.container<\/code> will take <code>60%<\/code> of the browser viewport width, whilst the <code>.main<\/code> will take <code>.container<\/code> width as its direct parent.<\/p>\n<pre>\r\n .container {\r\n width: 60%;\r\n margin: 100px auto;\r\n background-color: #eaeaea;\r\n padding: 1%;\r\n height: 250px;\r\n font-family: Arial;\r\n text-align: center;\r\n }\r\n .main, .aside {\r\n line-height: 253px;\r\n }\r\n .main {\r\n width: 60%;\r\n height: 100%;\r\n float: left;\r\n background-color: #ccc;\r\n }\r\n .aside {\r\n width: 40%;\r\n height: 100%;\r\n background-color: #aaa;\r\n float: left;\r\n }\r\n <\/pre>\n<p>Thus, it will give us the following nice result:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-units\/percentage-demo.jpg\" alt=\"css-units\" width=\"500\" height=\"201\"><\/figure>\n<p>As percentage is also a relative unit, so it has a similar constraint like the EM unit as well. It is not obvious how much a percentage <code>15px<\/code> is of <code>500px<\/code>? This generally happens when we translate <code>px<\/code> unit from the design stage to web document in many cases.<\/p>\n<p>There are two ways we can take to this matter, either we do it traditionally with a calculator or if you are comfortable with using CSS Pre-processor, you can utilize the <code>percentage()<\/code> function from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/sass-lang.com\/\">Sass<\/a>.<\/p>\n<h2>Final Thoughts<\/h2>\n<p>There are many discussions on the best practices of using units in web design. But ideally the PX unit should be used when the properties generally need to be precise e.g. the <code>border-radius<\/code> and <code>box-shadow<\/code> horizontal or vertical offset, whilst for the EM unit <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/Style\/Examples\/007\/units\">as suggested by W3C is better used for font sizing<\/a>. Percentage is the ideal unit to use on responsive layouts.<\/p>","protected":false},"excerpt":{"rendered":"<p>Unit takes an important role for measuring and building things like a house, a bridge or a tower, and building a website is not an exception. There are a number of methods of measurements used on the Web, specifically in CSS, namely Pixel, EM and Percentage. In this post, we are going to run through&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[507],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS Units: Pixels, EM, and Percentage<\/title>\n<meta name=\"description\" content=\"Unit takes an important role for measuring and building things like a house, a bridge or a tower, and building a website is not an exception. There are a\" \/>\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\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Look Into CSS Units: Pixels, EM, and Percentage\" \/>\n<meta property=\"og:description\" content=\"Unit takes an important role for measuring and building things like a house, a bridge or a tower, and building a website is not an exception. There are a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-units\/\" \/>\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=\"2020-10-27T15:31:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-19T14:44:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-units\/rad-px.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=\"6 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\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"A Look Into CSS Units: Pixels, EM, and Percentage\",\"datePublished\":\"2020-10-27T15:31:58+00:00\",\"dateModified\":\"2023-05-19T14:44:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units\\\/\"},\"wordCount\":849,\"commentCount\":34,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-units\\\/rad-px.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units\\\/\",\"name\":\"CSS Units: Pixels, EM, and Percentage\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-units\\\/rad-px.jpg\",\"datePublished\":\"2020-10-27T15:31:58+00:00\",\"dateModified\":\"2023-05-19T14:44:44+00:00\",\"description\":\"Unit takes an important role for measuring and building things like a house, a bridge or a tower, and building a website is not an exception. There are a\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-units\\\/rad-px.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-units\\\/rad-px.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-units\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Look Into CSS Units: Pixels, EM, and Percentage\"}]},{\"@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":"CSS Units: Pixels, EM, and Percentage","description":"Unit takes an important role for measuring and building things like a house, a bridge or a tower, and building a website is not an exception. There are a","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\/","og_locale":"en_US","og_type":"article","og_title":"A Look Into CSS Units: Pixels, EM, and Percentage","og_description":"Unit takes an important role for measuring and building things like a house, a bridge or a tower, and building a website is not an exception. There are a","og_url":"https:\/\/www.hongkiat.com\/blog\/css-units\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-10-27T15:31:58+00:00","article_modified_time":"2023-05-19T14:44:44+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-units\/rad-px.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":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-units\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-units\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"A Look Into CSS Units: Pixels, EM, and Percentage","datePublished":"2020-10-27T15:31:58+00:00","dateModified":"2023-05-19T14:44:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-units\/"},"wordCount":849,"commentCount":34,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-units\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-units\/rad-px.jpg","keywords":["CSS"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-units\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-units\/","url":"https:\/\/www.hongkiat.com\/blog\/css-units\/","name":"CSS Units: Pixels, EM, and Percentage","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-units\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-units\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-units\/rad-px.jpg","datePublished":"2020-10-27T15:31:58+00:00","dateModified":"2023-05-19T14:44:44+00:00","description":"Unit takes an important role for measuring and building things like a house, a bridge or a tower, and building a website is not an exception. There are a","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-units\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-units\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-units\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-units\/rad-px.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-units\/rad-px.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-units\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Look Into CSS Units: Pixels, EM, and Percentage"}]},{"@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-4Il","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18125","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=18125"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18125\/revisions"}],"predecessor-version":[{"id":67068,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18125\/revisions\/67068"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=18125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=18125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=18125"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=18125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}