CSS offers several types of units of measurement as part of your web design, i.e. for font sizes, spacing etc. <\/p>\n
px (pixels)<\/strong><\/p>\n If you’ve come from any other UI development you’ll probably be used to using pixels to define window sizes etc. Pixels allow us to specify positioning and sizes specifically, however these are not scalable, i.e. a 10px * 10px button might look fine on a lower resolution monitor but for a high resolution look tiny.<\/p>\n 1px = 1\/96th of an inch<\/p>\n cm<\/strong><\/p>\n Centimetres, and absolute measurement, 1cm equals 37.8px, which equals 25.2\/64in<\/p>\n mm<\/strong><\/p>\n Millimeters, 1mm = 1\/10th of 1 cm<\/p>\n Q<\/strong><\/p>\n Quarter-millimeteres, 1Q = 1\/40th of a cm<\/p>\n in<\/strong><\/p>\n Inches, 1 in = 2.54cm = 96px<\/p>\n pc<\/strong><\/p>\n Picas, 1pc = 1\/6th of an inch<\/p>\n pt<\/strong><\/p>\n Points, 1pc = 1\/72nd of an inch<\/p>\n em<\/strong><\/p>\n This is a unit which is relative to the font size of the parent element. So for example 3em will be twice the size of the parent element’s font size. In other words let’s assume the font size is 32px then 3em would be 3 * 32px, i.e. 96px. <\/p>\n rem (root em)<\/strong><\/p>\n This is similar (as the name suggests) to em, but it’s relative to the root HTML font size. Otherwise we can calculate things as per em, but using the root font size not the parent element.<\/p>\n","protected":false},"excerpt":{"rendered":" CSS offers several types of units of measurement as part of your web design, i.e. for font sizes, spacing etc. px (pixels) If you’ve come from any other UI development you’ll probably be used to using pixels to define window sizes etc. Pixels allow us to specify positioning and sizes specifically, however these are not […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[43],"tags":[],"class_list":["post-11186","post","type-post","status-publish","format-standard","hentry","category-css"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/11186","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=11186"}],"version-history":[{"count":2,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/11186\/revisions"}],"predecessor-version":[{"id":11188,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/11186\/revisions\/11188"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=11186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=11186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=11186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}