{"id":74022,"date":"2020-01-17T10:32:17","date_gmt":"2020-01-17T05:02:17","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=74022"},"modified":"2024-04-12T14:23:14","modified_gmt":"2024-04-12T08:53:14","slug":"relative-units-px-em-ex-2","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/relative-units-px-em-ex-2\/","title":{"rendered":"Relative Units (px, em, ex, %)"},"content":{"rendered":"<div><strong>Px or Pixel<\/strong><\/div>\n<div>It is useful for display on screen. It is measured relative to the computer screen\u2019s settings of the resolution as 1px on a resolution of 800 x 600 is larger than 1px on resolution of 1024 x 768. It is used as<\/div>\n<div><\/div>\n<div>font: 12px sans-serif;<\/div>\n<div><strong>em or Font Size Relative<\/strong><\/div>\n<div>It is widely\u00a0 used. It being relative to the font size facilitates designs to scale up and down as per the user\u2019s font size preferences. Browsers have means for scaling the font size up or down hence, changing the size of an em and values based on em units. It is used as<\/div>\n<div><\/div>\n<div>font-size: 2em;<\/div>\n<div><strong>% or Percentage<\/strong><\/div>\n<div>They depend on another element\u2019s measurement, like font size or width or height of containing element. It is relative to either the property and\/or value used in percentage measurement for or\u00a0 other CSS applied to the web page.<\/div>\n<div><strong>Ex or Height of the Lowercase Letter \u201cx\u201d<\/strong><\/div>\n<div>It is relative to the height of the lowercase letter \u201cx\u201d. It can be inconsistent across different fonts, so it is neither used for display design nor for print style sheets for which em or pt are used.<\/div>\n<div><\/div>\n<div>Most of CSS is influenced by length and units. Usually for display on a screen pixel is used as computers display images in pixels.\u00a0 Units of lengths in CSS are explained in the figure<\/div>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-59479\" src=\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/VS-1056-Certified-CSS3-Designer-Reading_Material_html_m4e731a35.png\" alt=\"VS-1056 Certified CSS3 Designer Reading_Material_html_m4e731a35\" width=\"291\" height=\"363\" \/><\/div>\n<div>\n<h5 id=\"block-07feabc5-3923-4122-ba70-f7cf1db64a8f\" class=\"block-editor-block-list__block wp-block is-selected rich-text block-editor-rich-text__editable is-hovered wp-block\" tabindex=\"0\" role=\"textbox\" contenteditable=\"true\" aria-label=\"Write heading\u2026\" aria-multiline=\"true\" data-block=\"07feabc5-3923-4122-ba70-f7cf1db64a8f\" data-type=\"core\/heading\" data-title=\"Heading\">Go To- <a href=\"https:\/\/www.vskills.in\/certification\/tutorial\/certified-css3-developer\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Certified CSS3 Developer<\/strong> <strong>Tutorial<\/strong><\/a><\/h5>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Px or Pixel It is useful for display on screen. It is measured relative to the computer screen\u2019s settings of the resolution as 1px on a resolution of 800 x 600 is larger than 1px on resolution of 1024 x 768. It is used as font: 12px sans-serif; em or Font Size Relative It is&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8568],"tags":[8571],"class_list":["post-74022","page","type-page","status-publish","hentry","category-css3","tag-relative-units"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Relative Units (px, em, ex, %) - Tutorial<\/title>\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.vskills.in\/certification\/tutorial\/relative-units-px-em-ex-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Relative Units (px, em, ex, %) - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Px or Pixel It is useful for display on screen. It is measured relative to the computer screen\u2019s settings of the resolution as 1px on a resolution of 800 x 600 is larger than 1px on resolution of 1024 x 768. It is used as font: 12px sans-serif; em or Font Size Relative It is...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/relative-units-px-em-ex-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:53:14+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/VS-1056-Certified-CSS3-Designer-Reading_Material_html_m4e731a35.png\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/relative-units-px-em-ex-2\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/relative-units-px-em-ex-2\/\",\"name\":\"Relative Units (px, em, ex, %) - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/relative-units-px-em-ex-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/relative-units-px-em-ex-2\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/VS-1056-Certified-CSS3-Designer-Reading_Material_html_m4e731a35.png\",\"datePublished\":\"2020-01-17T05:02:17+00:00\",\"dateModified\":\"2024-04-12T08:53:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/relative-units-px-em-ex-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/relative-units-px-em-ex-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/relative-units-px-em-ex-2\/#primaryimage\",\"url\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/VS-1056-Certified-CSS3-Designer-Reading_Material_html_m4e731a35.png\",\"contentUrl\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/VS-1056-Certified-CSS3-Designer-Reading_Material_html_m4e731a35.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/relative-units-px-em-ex-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Relative Units (px, em, ex, %)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Relative Units (px, em, ex, %) - Tutorial","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.vskills.in\/certification\/tutorial\/relative-units-px-em-ex-2\/","og_locale":"en_US","og_type":"article","og_title":"Relative Units (px, em, ex, %) - Tutorial","og_description":"Px or Pixel It is useful for display on screen. It is measured relative to the computer screen\u2019s settings of the resolution as 1px on a resolution of 800 x 600 is larger than 1px on resolution of 1024 x 768. It is used as font: 12px sans-serif; em or Font Size Relative It is...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/relative-units-px-em-ex-2\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:53:14+00:00","og_image":[{"url":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/VS-1056-Certified-CSS3-Designer-Reading_Material_html_m4e731a35.png","type":"","width":"","height":""}],"twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/relative-units-px-em-ex-2\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/relative-units-px-em-ex-2\/","name":"Relative Units (px, em, ex, %) - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/relative-units-px-em-ex-2\/#primaryimage"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/relative-units-px-em-ex-2\/#primaryimage"},"thumbnailUrl":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/VS-1056-Certified-CSS3-Designer-Reading_Material_html_m4e731a35.png","datePublished":"2020-01-17T05:02:17+00:00","dateModified":"2024-04-12T08:53:14+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/relative-units-px-em-ex-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/relative-units-px-em-ex-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/relative-units-px-em-ex-2\/#primaryimage","url":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/VS-1056-Certified-CSS3-Designer-Reading_Material_html_m4e731a35.png","contentUrl":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/VS-1056-Certified-CSS3-Designer-Reading_Material_html_m4e731a35.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/relative-units-px-em-ex-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Relative Units (px, em, ex, %)"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74022","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=74022"}],"version-history":[{"count":4,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74022\/revisions"}],"predecessor-version":[{"id":85412,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74022\/revisions\/85412"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=74022"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=74022"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=74022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}