{"id":2513,"date":"2023-02-16T21:38:24","date_gmt":"2023-02-16T21:38:24","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/uncategorized\/the-difference-between-px-em-and\/"},"modified":"2023-12-08T20:24:07","modified_gmt":"2023-12-08T20:24:07","slug":"the-difference-between-px-em-and","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/the-difference-between-px-em-and\/","title":{"rendered":"The difference between px, em and %."},"content":{"rendered":"

While editing some of your elements under the Styles<\/strong> menu, you’ll see some types of measures to be used in the creative studio. Check out below what these types of measures are and how to use them.<\/p>\n

px <\/h3>\n

This is a static unit of measurement, specific to digital screens. One pixel (px) is related to one dot of color information on a computer screen (Or tablet, mobile, smart watch, TV, etc.).<\/p>\n

Think of a grid of hundreds of thousands of boxes and each box contained a very small amount visual information about a website’s design.<\/p>\n

So for example, if you set a margin (outside space) of 10px between a button and an image, then there would be a gap between those elements, equal to 10 grid boxes. <\/p>\n

em<\/h3>\n

This a scalable unit of measurement, based on the current font site. So if the current font is 18pt, then 1em = 18pt. 2em would be 36pt. .5em would be 9pt.<\/p>\n

This is great for responsive design and accessibility, do to it’s scaleable nature.<\/p>\n

%<\/h3>\n

The percent unit is much like the \u201cem\u201d unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.<\/p>\n

 <\/p>\n

\n

If you have any questions, please contact us on help@ioninteractive.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

While editing some of your elements under the Styles menu, you’ll see some types of measures to be used in the creative studio. Check out below what these types of measures are and how […]<\/p>\n","protected":false},"author":9,"featured_media":5538,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[1420,32],"tags":[2131,2141],"class_list":["post-2513","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-creative-studio","category-the-creative-studio","tag-creative-studio","tag-layout"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2513","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=2513"}],"version-history":[{"count":2,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2513\/revisions"}],"predecessor-version":[{"id":5540,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2513\/revisions\/5540"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5538"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=2513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=2513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=2513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}