| Unit | Description | Remark |
|---|---|---|
| px | Fixed pixel size | |
| em | 1 em is equal to the font size of the current parent element | Divi Font Size: 1 em = body font size specified in theme customizer |
| rem | 1 rem is equal to the font size of the root/browser font size, browser default is 16px | Use this instead of px to meet accessibility guide lines* |
| % | Based on the width of the parent element. | * Use for left and right margins because all Divi sections, rows, modules are based on percentage widths. * Avoid for top and bottom margins, paddings etc. as it causes the content to move up and down depending on the browser size. * Divi Font Size: 100% = body font size specified in theme customizer |
| vw | Based on the width of the browser. 1 vw is 1/100 of the browser width. | Use for text responsive sizes, best in combination with clamp() |
| vh | Based on the height of the browser. 1 vh is 1/100 of the browser width. | |
| – | Unitless value, primarily used for line heights | Line-height: 1.2 sets the line height to 120% of the font size. |
Sources:
- https://www.elegantthemes.com/blog/divi-resources/better-mobile-website-design-how-to-use-vw-vh-and-rem-to-create-fluid-divi-pages
- https://playfulprogramming.com/posts/you-should-be-using-unitless-values-for-line-height/