mirror of https://github.com/rjbasitali/tutorials
1.2 KiB
1.2 KiB
Dimensions, Sizes And Units
Where Unit Matters
Pixels, Percentages & More
| Units | Sign |
|---|---|
| pixels | px |
| percentages | % |
| root em | rem |
| em | em |
| viewport height | vh |
| viewport width | vw |
Some questions?
Which properties can you use in connection with these units? How is the size calculated? What's the right unit to choose?
Where Units Matter
Keeping the CSS box model in mind, going inside out, e.g from content to padding to border to margin. Lets see where we can apply these units.
font-size, padding, border, margin, width, height, top, bottom, left, right.
An Overview Of Available Sizes And Units
How is the Size Calculated?
| Absolute Lengths | Viewport Lengths | Font-Relative Lengths |
|---|---|---|
| Mostly ignore user settings | Adjust to current viewport | Adjust to default font size |
px |
vh |
rem |
cm |
vw |
|
mm |
vmin |
|
... |
vmax |
Also, percentage % is another special unit used.
How is the Box Size for % Units Calculated?
To understand how % units are calculated, we first need to understand the concept of containing blocks.