Today's post will discuss length units, which you may have encountered in the previous post padding: 10px while working on the challenge.
CSS uses absolute and relative units, which are the two sorts of units that are normally used for length and size.
What are Absolute units?
In general, absolute units are thought to be the same size at all times. There might be some exceptions, Depending on the size and quality of your screen or browser settings.
The most commonly used absolute length unit in CSS is pixels px.
| Unit | Description |
|---|---|
| px | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| Q | Quarter millimeters (1Q = 1/40th of 1cm) |
What are relative units?
Relative length units are defined in relation to another length property, such as parent element's font size. Relative length units scale more effectively on the page
| Unit | Description |
|---|---|
| % | with reference (relative) to the parent element |
| rem | relative to the font-size of the root element which is by default 16px, 1rem= 16px |
| em | inherits the font-size from its parent element meaning 1em = `font-size of parent element |
| vw | view width is relative to the viewport's width |
| vh | view height is relative to the viewport's height |
| ex | relative to x-height (distance between baseline and mean line of a lowercase letter) or 1/2 of 1em |
| vmin | vmin is 1% of the viewport's smallest dimension |
| vmax | vmax is 1% of the viewport's largest dimension |
Let's use examples to further clarify the ex, vh, vw, vmin and vmax relative units.
vmin & vmax
If the viewport is 900 pixels wide and 700 pixels high, the 1vmin will be 7 pixels and the vmax will be 9 pixels.
1vmin = 700 -99%
1vmin = 7 pixels1vmax = 900 -99%
1vmax = 9 pixels
ex Unit
source : Stackoverflow
As mentioned in the table ex is the distance between baseline and mean line of a lowercase letter
vh & vw
A web page's viewport is the portion that the user can see. On a mobile phone as compared to a computer screen, the viewport is smaller because it varies depending on the device.
Relative units are the most frequently used when creating a single webpage or in significant real-world projects. Using relative units for your layout maintain its stability making it less likely to break.
Top comments (0)