{"id":445,"date":"2015-02-20T15:42:12","date_gmt":"2015-02-20T13:42:12","guid":{"rendered":"http:\/\/board.resabi.com\/?p=445"},"modified":"2015-02-20T15:42:12","modified_gmt":"2015-02-20T13:42:12","slug":"css-ruler-useful-reference-relative-absolute-dimensions-css","status":"publish","type":"post","link":"https:\/\/resabi.com\/board\/2015\/02\/20\/css-ruler-useful-reference-relative-absolute-dimensions-css\/","title":{"rendered":"CSS Ruler &#8211; useful reference for relative and absolute dimensions in CSS"},"content":{"rendered":"<p>I&#8217;ve been working and playing with CSS for several years, and still haven&#8217;t heard of some of these before. And they can be quite useful.<\/p>\n<p>Did you know CSS lengths can be relative to font, to viewport or absolute? Here you can see and compare available units from EMs to inches, as well as those viewport related such as vh, vw, and vmax.<\/p>\n<p style=\"text-align: center;\">%CODE1%<\/p>\n<p><a href=\"http:\/\/katydecorah.com\/css-ruler\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-446 size-full\" title=\"CSS Ruler\" src=\"https:\/\/resabi.com\/board\/wp-content\/uploads\/2015\/02\/CSS-Ruler.jpg\" alt=\"CSS-Ruler\" width=\"720\" height=\"445\" srcset=\"https:\/\/resabi.com\/board\/wp-content\/uploads\/2015\/02\/CSS-Ruler.jpg 720w, https:\/\/resabi.com\/board\/wp-content\/uploads\/2015\/02\/CSS-Ruler-300x185.jpg 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/a><\/p>\n<p>You can also see how the relative ones compare to the font-size of HTML and BODY.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve been working and playing with CSS for several years, and still haven&#8217;t heard of some of these before. And they can be quite useful. Did you know CSS lengths can be relative to font, to viewport or absolute? Here you can see and compare available units from EMs to inches, as well as those [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":446,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[9],"tags":[20],"class_list":["post-445","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources","tag-css"],"_links":{"self":[{"href":"https:\/\/resabi.com\/board\/wp-json\/wp\/v2\/posts\/445","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/resabi.com\/board\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/resabi.com\/board\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/resabi.com\/board\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/resabi.com\/board\/wp-json\/wp\/v2\/comments?post=445"}],"version-history":[{"count":0,"href":"https:\/\/resabi.com\/board\/wp-json\/wp\/v2\/posts\/445\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/resabi.com\/board\/wp-json\/wp\/v2\/media\/446"}],"wp:attachment":[{"href":"https:\/\/resabi.com\/board\/wp-json\/wp\/v2\/media?parent=445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/resabi.com\/board\/wp-json\/wp\/v2\/categories?post=445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/resabi.com\/board\/wp-json\/wp\/v2\/tags?post=445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}