CSS length, height, and size units
- Available in: Beaver Builder 2.2
- Applies to: All rows and columns, a subset of modules
You can use not only an absolute unit value (px) for length, height, margin, and padding settings, but also relative em, rem, %, vw, and vh units, depending on the setting.
What do these relative units mean?
The W3Schools site has a good summary table of absolute and relative CSS units and what each of the relative units is relative to, plus which versions of which browsers support which units.
Which of these units are available in Beaver Builder layouts?
The absolute px unit is always available for every setting in Beaver Builder.
As for relative settings, which units are available for which setting depends on the type of setting and whether the applicable units have been enabled for a particular setting. The following table shows which CSS units are enabled for which settings.
|Row margins (global setting)||✓||✓|
|Column margins (individual and global)||✓||✓|
|Module margins (individual and global)||✓||✓|
|Row padding (global setting)||✓||✓||✓|
|Column padding (individual and global)||✓||✓||✓|
|Row width (individual and global)||✓||✓||✓|
|Minimum height (row, column)||✓||✓||✓|
|Row shape overlays||✓||✓||✓||✓|
|Border settings (row, column, multiple modules)||✓|
|Module style padding (Accordion, Call to Action, Callout, Tabs)||✓||✓||✓|
|Module style padding (Menu)||✓||✓|
|Module width (Button)||✓||✓||✓|
|Module width (Photo, Separator)||✓||✓||✓|
|Module height (Map)||✓||✓|
|Typography font size (multiple modules)||✓||✓||✓|
|Typography font line height (multiple modules)||✓||✓|
|Icon size (modules with icons)||✓||✓||✓|
Note: If you don't see a setting here, chances are the unit is px only.
When to use which unit
Unfortunately there's not a simple answer to help you make the decision of whether to use absolute or relative units, and if relative, which one. Some of the factors are design, accessibility, and media queries.
Here are some of the many articles on the topic:
- Typography units (em, rem, px, %) for beginners - Webflow CSS tutorial (video)
- Width and height units (px, %, vh, vw) - Webflow CSS tutorial (video)
- When to use which units in CSS
- EM vs. REM vs. PX
- Comprehensive Guide: When to Use Em vs. Rem
- Fun with Viewport Units
Most browser versions supported by Beaver Builder support all of the CSS units available for layouts. However, if you are planning for your website to be used in restricted browser situation, check the browser support table at the W3Schools site for compatibility.