{"id":6501,"date":"2021-07-20T21:06:17","date_gmt":"2021-07-20T19:06:17","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/what-is-the-difference-between-px-em-rem-vw-and-vh\/"},"modified":"2026-09-02T19:38:59","modified_gmt":"2026-09-02T17:38:59","slug":"what-is-the-difference-between-px-em-rem-vw-and-vh","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/en\/what-is-the-difference-between-px-em-rem-vw-and-vh\/","title":{"rendered":"What is the difference between PX, EM, REM, %, VW, and VH?"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Step-by-step video<\/h2>\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Cu\u00e1l es la diferencia entre PX, EM, REM, VW\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/JBt29Y1AwsQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n<h2 class=\"wp-block-heading\" id=\"0-estructura-b%C3%A1sica-de-un-documento-html\">Basic HTML Document Structure<\/h2>\n\n<p class=\"wp-block-paragraph\">As Carl Sagan said, <a href=\"https:\/\/www.youtube.com\/watch?v=LTo31PjL05c\" target=\"_blank\" rel=\"noreferrer noopener\">&#8220;If you wish to make <em>an apple pie from scratch, you must first invent the universe<\/em>&#8220;<\/a>, and yes, to understand Elementor&#8217;s relative units, what a parent element or the root container is, etc., we first need to know the basic structure of a web page in HTML.<\/p>\n\n<p class=\"wp-block-paragraph\">Here we see the minimum structure of an HTML (Hypertext Markup Language) document. HTML is composed of tags delimited by the less-than sign  <strong>&lt;<\/strong>  and greater-than sign  <strong>&gt;<\/strong>, for example  &lt;html&gt;. With exceptions like the first tag  &lt;!DOCTYPE html&gt; , which is absolute, all tags have an opening and closing, for example  <strong>&lt;h1&gt;<\/strong>Heading<strong>&lt;\/h1&gt;<\/strong>. The closing tag is distinguished because the tag opening includes <strong><span class=\"has-inline-color has-black-color\">&lt;\/<\/span><\/strong> in addition to the &#8220;less-than&#8221; sign, the forward slash also called <strong>slash<\/strong> <strong>\/<\/strong>.<\/p>\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a9abb8001eab&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a9abb8001eab\" class=\"aligncenter size-full is-resized wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"561\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML.png\" alt=\"Minimum HTML document structure\" class=\"wp-image-5034\" style=\"width:648px;height:379px\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML.png 960w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-500x292.png 500w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-768x449.png 768w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-600x351.png 600w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<ol class=\"wp-block-list\">\n<li>  The first line of the example is an absolute element (it has no closing tag); it is a <strong>document type declaration<\/strong> (also called a <strong>DOCTYPE declaration<\/strong>) that identifies this document as an HTML5 document and lets modern browsers know they should interpret the document as written according to the HTML5 specification.<\/li>\n\n\n\n<li>The entire document is contained within an <strong>html<\/strong> tag. The <strong>html<\/strong> tag is called the <strong>root element<\/strong> because it contains all other elements in the document and cannot be included in any other element. <\/li>\n\n\n\n<li>Inside the <strong>html<\/strong> tag, the document is divided into a head and a body. The <strong>head<\/strong> contains descriptive information about the document itself, such as its title, the stylesheets it uses, scripts, and other types of &#8220;meta&#8221; information. <\/li>\n\n\n\n<li>The <strong>body<\/strong> is the main content of the page; it is the element that contains everything we want to appear in the browser window.<\/li>\n\n\n\n<li>The <strong>meta<\/strong> elements within the head tag provide information about the document itself. A meta element can be used to provide all sorts of information, but in this example, it specifies the character encoding (the standardized collection of letters, numbers, and symbols) used in the document. <\/li>\n\n\n\n<li>Also within the head is the mandatory <strong>title<\/strong> tag. According to the HTML specification, every document must contain a descriptive title. This title is what is displayed in the browser tab and what Google will show in search results as the title of this page.  <\/li>\n\n\n\n<li>Within the body block, we can create as many sections as we want using the <strong>div<\/strong> tag. This tag allows grouping several block elements (paragraphs, headings, lists, etc.). These sections are containers. <\/li>\n\n\n\n<li>This is another section, just like the previous one.<\/li>\n<\/ol>\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a9abb8002652&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a9abb8002652\" class=\"aligncenter size-full is-resized wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"790\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-2.png\" alt=\"Minimum HTML document structure\" class=\"wp-image-5035\" style=\"width:533px;height:439px\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-2.png 960w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-2-500x411.png 500w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-2-768x632.png 768w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-2-600x494.png 600w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">As you can see in the <em>Figure<\/em>, all these tags are like containers. The root or main one is the <strong>html<\/strong> tag, which contains all others. Inside <strong>html<\/strong>, we have the <strong>body<\/strong>, and in turn, inside the <strong>body<\/strong>, we have other <strong>div<\/strong>s. So we can say that the <strong>root element<\/strong> is <strong>html<\/strong>, <strong>body<\/strong> is a child of <strong>html<\/strong>, and the <strong>div<\/strong>s are children of <strong>body<\/strong>. <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"1-unidades-de-medida-de-elementor\">Elementor Units of Measurement<\/h2>\n\n<p class=\"wp-block-paragraph\" id=\"unidades\">When designing with Elementor, you may notice that some elements have sizing options, allowing you to choose <strong>PX, EM, REM, %, VW<\/strong>, or <strong>VH<\/strong>. But what do these units of measurement actually mean, and when should you use one over another?  <\/p>\n\n<p class=\"wp-block-paragraph\">Let&#8217;s start with the basics: in CSS, you can specify element sizes or lengths using various units of measurement. The units you&#8217;ll find in some Elementor widget options include <em>PX, EM, REM, %, VW, and VH<\/em>, although several more are available in CSS. Not all Elementor elements will offer all these units. Elementor only presents the options that make the most sense for the given element.   <\/p>\n\n<p class=\"wp-block-paragraph\">The most important aspect to learn about the different units is that some units, like PX, are <strong>absolute units<\/strong>, and others are <strong>relative units<\/strong>.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"2-unidades-absolutas\">Absolute Units<\/h2>\n\n<p class=\"wp-block-paragraph\"><strong>PX<\/strong>: Pixels (px) are considered absolute units, although they are relative to the DPI and resolution of the display device. But on the device itself, the PX unit is fixed and does not change based on any other element. Using PX can be problematic for responsive websites, but they are useful for maintaining a consistent size for some elements. If you have elements that should not be resized, then using PX is a good option.   <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"3-unidades-relativas\">Relative Units<\/h2>\n\n<ul class=\"wp-block-list\">\n<li><strong>EM<\/strong>: relative to the parent element<\/li>\n\n\n\n<li><strong>REM<\/strong>: relative to the root element (HTML tag, and if not set, the size configured in the browser)<\/li>\n\n\n\n<li><strong>%<\/strong>: relative to the parent element<\/li>\n\n\n\n<li><strong>VW<\/strong>: relative to the viewport width<\/li>\n\n\n\n<li><strong>VH<\/strong>: relative to the viewport height<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Unlike PX, relative units like %, EM, and REM are better suited for responsive design and also help <strong>meet accessibility standards<\/strong>. Relative units scale better across different devices because they can scale up and down based on the size of another element. <\/p>\n\n<p class=\"wp-block-paragraph\">Let&#8217;s look at a simple example: in most browsers, the default font size is <strong>16px<\/strong>. Relative units calculate size from this base. If you change that base by setting a base size for the HTML tag via CSS, that becomes the base for calculating relative units on the rest of the page. Similarly, if a user adjusts their font size, that becomes the base for calculating relative units.   <\/p>\n\n<p class=\"wp-block-paragraph\">So, what do these units mean when it comes to the default 16px value?<\/p>\n\n<p class=\"wp-block-paragraph\">The number you specify will multiply that number by the default size.<\/p>\n\n<p class=\"wp-block-paragraph\">1em = 16px (1 * 16)<\/p>\n\n<p class=\"wp-block-paragraph\">2em = 32px (2 * 16)<\/p>\n\n<p class=\"wp-block-paragraph\">0.5em = 8px (.5 * 16)<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">1rem = 16px<\/p>\n\n<p class=\"wp-block-paragraph\">2rem = 32px<\/p>\n\n<p class=\"wp-block-paragraph\">0.5rem = 8px<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">100% = 16px<\/p>\n\n<p class=\"wp-block-paragraph\">200% = 32px<\/p>\n\n<p class=\"wp-block-paragraph\">50% = 8px<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">Okay, great, but what if the user changes the default size in their browser? Because these are relative units, the final size values will be based on the new base size. Although the browser default is usually 16px, if the user changed it to 14px, the calculated sizes would end up being:  <\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">1em = 14px (1 * 14)<\/p>\n\n<p class=\"wp-block-paragraph\">2em = 28px (2 * 14)<\/p>\n\n<p class=\"wp-block-paragraph\">0.5em = 7px (.5 * 14)<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">1rem = 14px<\/p>\n\n<p class=\"wp-block-paragraph\">2rem = 28px<\/p>\n\n<p class=\"wp-block-paragraph\">0.5rem = 7px<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">100% = 14px<\/p>\n\n<p class=\"wp-block-paragraph\">200% = 28px<\/p>\n\n<p class=\"wp-block-paragraph\">50% = 7px<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">This gives the user the freedom to adjust their browser&#8217;s default font size while maintaining the relative scale of each element you&#8217;ve specified.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"4-%C2%BFcu%C3%A1l-es-la-diferencia-entre-em-y-rem\">What is the difference between EM and REM?<\/h2>\n\n<p class=\"wp-block-paragraph\">Looking at the chart above, EM and REM appear exactly the same. So, how do they differ? <\/p>\n\n<p class=\"wp-block-paragraph\">Simply put, they differ based on inheritance. As mentioned, <strong>REM<\/strong> is based on the <strong>root element<\/strong> (HTML), and if not set, it defaults to the user&#8217;s browser setting, which <strong>is 16px by default<\/strong>. Every child element that uses <strong>REM<\/strong> will use the HTML root size as its calculation point, regardless of whether a parent element has different sizes specified.  <\/p>\n\n<p class=\"wp-block-paragraph\"><strong>EM<\/strong>, on the other hand, is based on the parent element&#8217;s font size. If a parent element has a different size than the root element, the <strong>EM<\/strong> calculation will be based on the parent element, not the root element. This means that nested elements using <strong>EM<\/strong> for sizing can sometimes end up with a size you didn&#8217;t anticipate. On the other hand, it gives you more granular control if you need to specify the size of a particular area of a page.   <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"5-entonces-%C2%BFqu%C3%A9-pasa-con-vw-y-vh-%C2%BFde-qu%C3%A9-se-tratan\">So, what about %, VW, and VH? What are they all about? <\/h2>\n\n<p class=\"wp-block-paragraph\">While <strong>PX<\/strong>, <strong>EM<\/strong>, and <strong>REM<\/strong> are primarily used for font size, <strong>%<\/strong>, <strong>VW<\/strong>, and <strong>VH<\/strong> are mainly used for margins, padding, spacing, and widths\/heights.<\/p>\n\n<p class=\"wp-block-paragraph\">To reiterate, <strong>VH<\/strong> stands for &#8220;viewport height,&#8221; which is the height of the visible screen. <strong>100VH<\/strong> would represent 100% of the viewport height or the full screen height. And, of course, <strong>VW<\/strong> stands for &#8220;viewport width,&#8221; which is the width of the visible screen. <strong>100VW<\/strong> would represent 100% of the viewport width or the full screen width. <strong>%<\/strong> reflects a percentage of the <strong>parent element&#8217;s<\/strong> size, regardless of the viewport size. <\/p>\n\n<p class=\"wp-block-paragraph\">Let&#8217;s look at some examples of where Elementor offers <strong>%<\/strong>, <strong>VW<\/strong>, and <strong>VH<\/strong> options.<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Column Widths<\/strong>: If you edit the layout of an Elementor column, you&#8217;ll notice there&#8217;s only one width sizing unit available: %. Column widths only work well and responsively when percentages are used, so no other option is offered. <\/li>\n\n\n\n<li><strong>Margins<\/strong>: Section margins can be specified in PX or %. It is usually preferable to use % to ensure that margins are not larger than the content when scaling down for a mobile device, for example. By using a percentage of the device width, your margins will remain relative to the content size, which is almost always preferable.  <\/li>\n\n\n\n<li><strong>Padding<\/strong>: Section padding can be specified in PX, EM, or %. As with margins, it is often preferable to use EM or % so that padding remains relative as the page size increases. <\/li>\n\n\n\n<li><strong>Font Size<\/strong>: If you edit the typography of an element, such as a heading, you will see four options: PX, EM, REM, and VH.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Have you ever created a large heading and admired how good it looked on desktop, only to realize it was too big on mobile?<\/p>\n\n<p class=\"wp-block-paragraph\">The key to elegantly solving this is to use EM, REM, or VW instead of PX. Which you choose depends on your particular situation. I usually choose EM because I want the size to be relative to the heading&#8217;s parent. But if you prefer the size to be relative to the root (HTML) size, choose REM instead. Or, you can set it to be relative to the viewport width (VW) if that works better for your case.     <\/p>\n\n<p class=\"wp-block-paragraph\">Keep in mind that you can also set specific font size PX values per device using the device icons to specify a size for desktop, tablet, and mobile. But that still imposes limits on responsiveness and accessibility, so keep that in mind if you choose PX. <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"6-m%C3%A1s-sobre-vw-y-vh\">More about VW and VH<\/h2>\n\n<p class=\"wp-block-paragraph\">Viewport units represent a percentage of the current browser viewport (current browser size). While similar to percentage units, there is a difference. Viewport units are calculated as a percentage of the current browser viewport size. Percentage units, on the other hand, are calculated as a percentage of the <strong>parent element<\/strong>, which may be different from the viewport size.   <\/p>\n\n<p class=\"wp-block-paragraph\">Consider an example of a mobile screen viewport of 480px x 800px.<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">1 VW = 1% of viewport width (or 4.8px)<\/p>\n\n<p class=\"wp-block-paragraph\">50 VW = 50% of viewport width (or 240px)<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">1 VH = 1% of viewport height (or 8px)<\/p>\n\n<p class=\"wp-block-paragraph\">50 VH = 50% of viewport height (or 400px)<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">If the viewport size changes, the element size changes accordingly.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"7-%C2%BFcu%C3%A1ndo-deber%C3%ADa-usar-una-unidad-sobre-otra\">When should you use one unit over another?<\/h2>\n\n<p class=\"wp-block-paragraph\">Ultimately, there is no perfect answer to this question. In general, it&#8217;s often best to choose one of the relative units instead of PX to give your web page the best chance of rendering a responsive design. However, choose <strong>PX<\/strong> if you need to ensure that an element never changes size at any breakpoint and remains the same regardless of whether a user has chosen a different default size. PX units guarantee consistent results, even if that&#8217;s not ideal.   <\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>EM<\/strong> is relative to the parent element&#8217;s font size, so if you want to scale the element&#8217;s size based on its parent&#8217;s size, use EM.<\/li>\n\n\n\n<li><strong>REM<\/strong> is relative to the root (HTML) font size, and if this is not set, the browser&#8217;s configured size will be used. So, if you want to scale the element&#8217;s size based on the root size, no matter what the parent size is, use REM. If you&#8217;ve used EM and are encountering sizing issues due to many nested elements, REM is probably the better choice. <\/li>\n\n\n\n<li><strong>VW<\/strong> is useful for creating full-width (100%) elements that fill the entire viewport width. Of course, you can use any percentage of the viewport width to achieve other goals, such as 50% for half width, etc. <\/li>\n\n\n\n<li><strong>VH<\/strong> is useful for creating full-height (100%) elements that fill the entire viewport height. Of course, you can use any percentage of the viewport height to achieve other goals, such as 50% for half height, etc. <\/li>\n\n\n\n<li><strong>%<\/strong> is similar to VW and VH, but it is not a length relative to the viewport width or height. Instead, it is a percentage of the parent element&#8217;s width or height. Percentage units are often useful for setting margin widths, for example.  <\/li>\n\n\n\n<li>Elementor makes it easy to choose the option that best suits your design. Ultimately, it&#8217;s your choice. <\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Step-by-step video Basic HTML Document Structure As Carl Sagan said, &#8220;If you wish to make an apple pie from scratch, you must first invent the universe&#8220;, and yes, to understand Elementor&#8217;s relative units, what a parent element or the root container is, etc., we first need to know the basic structure of a web page [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":6502,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"PX, EM, REM, VW and VH: Key CSS Unit Differences","_seopress_titles_desc":"Basic HTML Document Structure As Carl Sagan said, \"If you wish to make an apple pie from scratch, you must first invent the universe\"...","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"none","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":"","_bricks_page_content_2":[],"_bricks_page_header_2":[],"_bricks_page_footer_2":[]},"categories":[384],"tags":[377,385,386],"class_list":["post-6501","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-elementor","tag-web-design","tag-wordpress-customization"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6501","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/comments?post=6501"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6501\/revisions"}],"predecessor-version":[{"id":6503,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6501\/revisions\/6503"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media\/6502"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media?parent=6501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/categories?post=6501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/tags?post=6501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}