Step-by-step video
Basic HTML Document Structure
As Carl Sagan said, “If you wish to make an apple pie from scratch, you must first invent the universe“, and yes, to understand Elementor’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.
Here we see the minimum structure of an HTML (Hypertext Markup Language) document. HTML is composed of tags delimited by the less-than sign < and greater-than sign >, for example <html>. With exceptions like the first tag <!DOCTYPE html> , which is absolute, all tags have an opening and closing, for example <h1>Heading</h1>. The closing tag is distinguished because the tag opening includes </ in addition to the “less-than” sign, the forward slash also called slash /.
- The first line of the example is an absolute element (it has no closing tag); it is a document type declaration (also called a DOCTYPE declaration) 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.
- The entire document is contained within an html tag. The html tag is called the root element because it contains all other elements in the document and cannot be included in any other element.
- Inside the html tag, the document is divided into a head and a body. The head contains descriptive information about the document itself, such as its title, the stylesheets it uses, scripts, and other types of “meta” information.
- The body is the main content of the page; it is the element that contains everything we want to appear in the browser window.
- The meta 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.
- Also within the head is the mandatory title 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.
- Within the body block, we can create as many sections as we want using the div tag. This tag allows grouping several block elements (paragraphs, headings, lists, etc.). These sections are containers.
- This is another section, just like the previous one.
As you can see in the Figure, all these tags are like containers. The root or main one is the html tag, which contains all others. Inside html, we have the body, and in turn, inside the body, we have other divs. So we can say that the root element is html, body is a child of html, and the divs are children of body.
Elementor Units of Measurement
When designing with Elementor, you may notice that some elements have sizing options, allowing you to choose PX, EM, REM, %, VW, or VH. But what do these units of measurement actually mean, and when should you use one over another?
Let’s start with the basics: in CSS, you can specify element sizes or lengths using various units of measurement. The units you’ll find in some Elementor widget options include PX, EM, REM, %, VW, and VH, 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.
The most important aspect to learn about the different units is that some units, like PX, are absolute units, and others are relative units.
Absolute Units
PX: 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.
Relative Units
- EM: relative to the parent element
- REM: relative to the root element (HTML tag, and if not set, the size configured in the browser)
- %: relative to the parent element
- VW: relative to the viewport width
- VH: relative to the viewport height
Unlike PX, relative units like %, EM, and REM are better suited for responsive design and also help meet accessibility standards. Relative units scale better across different devices because they can scale up and down based on the size of another element.
Let’s look at a simple example: in most browsers, the default font size is 16px. 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.
So, what do these units mean when it comes to the default 16px value?
The number you specify will multiply that number by the default size.
1em = 16px (1 * 16)
2em = 32px (2 * 16)
0.5em = 8px (.5 * 16)
1rem = 16px
2rem = 32px
0.5rem = 8px
100% = 16px
200% = 32px
50% = 8px
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:
1em = 14px (1 * 14)
2em = 28px (2 * 14)
0.5em = 7px (.5 * 14)
1rem = 14px
2rem = 28px
0.5rem = 7px
100% = 14px
200% = 28px
50% = 7px
This gives the user the freedom to adjust their browser’s default font size while maintaining the relative scale of each element you’ve specified.
What is the difference between EM and REM?
Looking at the chart above, EM and REM appear exactly the same. So, how do they differ?
Simply put, they differ based on inheritance. As mentioned, REM is based on the root element (HTML), and if not set, it defaults to the user’s browser setting, which is 16px by default. Every child element that uses REM will use the HTML root size as its calculation point, regardless of whether a parent element has different sizes specified.
EM, on the other hand, is based on the parent element’s font size. If a parent element has a different size than the root element, the EM calculation will be based on the parent element, not the root element. This means that nested elements using EM for sizing can sometimes end up with a size you didn’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.
So, what about %, VW, and VH? What are they all about?
While PX, EM, and REM are primarily used for font size, %, VW, and VH are mainly used for margins, padding, spacing, and widths/heights.
To reiterate, VH stands for “viewport height,” which is the height of the visible screen. 100VH would represent 100% of the viewport height or the full screen height. And, of course, VW stands for “viewport width,” which is the width of the visible screen. 100VW would represent 100% of the viewport width or the full screen width. % reflects a percentage of the parent element’s size, regardless of the viewport size.
Let’s look at some examples of where Elementor offers %, VW, and VH options.
- Column Widths: If you edit the layout of an Elementor column, you’ll notice there’s only one width sizing unit available: %. Column widths only work well and responsively when percentages are used, so no other option is offered.
- Margins: 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.
- Padding: 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.
- Font Size: If you edit the typography of an element, such as a heading, you will see four options: PX, EM, REM, and VH.
Have you ever created a large heading and admired how good it looked on desktop, only to realize it was too big on mobile?
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’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.
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.
More about VW and VH
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 parent element, which may be different from the viewport size.
Consider an example of a mobile screen viewport of 480px x 800px.
1 VW = 1% of viewport width (or 4.8px)
50 VW = 50% of viewport width (or 240px)
1 VH = 1% of viewport height (or 8px)
50 VH = 50% of viewport height (or 400px)
If the viewport size changes, the element size changes accordingly.
When should you use one unit over another?
Ultimately, there is no perfect answer to this question. In general, it’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 PX 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’s not ideal.
- EM is relative to the parent element’s font size, so if you want to scale the element’s size based on its parent’s size, use EM.
- REM is relative to the root (HTML) font size, and if this is not set, the browser’s configured size will be used. So, if you want to scale the element’s size based on the root size, no matter what the parent size is, use REM. If you’ve used EM and are encountering sizing issues due to many nested elements, REM is probably the better choice.
- VW 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.
- VH 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.
- % 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’s width or height. Percentage units are often useful for setting margin widths, for example.
- Elementor makes it easy to choose the option that best suits your design. Ultimately, it’s your choice.