CSS Units
When you design a site, you have to define the sizes for many elements (width and height, font size, margin, padding)
CSS defines those sizes with units.
The browser uses CSS units to determine the level of big or small an element should be.
Some units are fixed (fixed dimension that occurs whatever size you set them to) others are flexible (dimensions change relative to the parent or display size).
Let‘s understand these easily and simply 6.
1 Absolute Units (Fixed Size)
Absolute units don‘t change irrespective of the device or screen size. px( Pixels)
The most common unit used is.
1px is known as ‘one pixel on the screen’.
Does not vary with size of screen
Very accurate and easily manageable
Example:
Font-size: 16px;
Width: 300px;
Excellent solution for absolute positioning and fixed layouts. pt (Points)
Primarily utilized for the printer
(1pt = 1/72 of an inch)
Not as common for websites. cm, mm, in (Centimeter, Millimeter, Inch)
- Physical units of measuring
- Used infrequently in web design
- Mostly used for print layouts
- What is the right time to use Absolute Unitsa/
- When you have to be certain of sizes.
- For the borders, small icons, or fixed elements
- Not too good for responsive design
2 Relative Units (Flexible Size)
These are units that may be defined relative to screen size, parent, or root element.
These are very important for responsive design.
In (%) (Percent)
Size is determined by parent element
Extremely, very useful for layouts
Example:
Width: 50%;
This element is 50% of its parent‘s width.
How:
Based on: Relative to the font size of the parent element
If parent font-size is 20px:
Values here: 1em 20px
Example:
Font-size: 2em;
The size: 2. then scaled will be equal to 2 times the font size of parent element.
Problem: It may be duplicated when odd nested elements.
Rem (Root em)
Compared to the font size of root (html)
More predictable than em
If:
Html {
Has been written in the Poppins light font,10so there is some consistency in style and font.
}
Then:
How many pixels is 1 rem?1 rem 16 px
2 (rems) = 32px WiziXtended (tab.2) – Good for the spacing as well as the size of the words.
Vw(VIEWPORT WIDTH)10.8.2.4 10.8.2.4.1. A unit of measure to be scaled according to the medium in use, for example the width of the entire browser window.1 10.8.2.4.2. The width of the viewport.
Based on width of screen
1vw: equals to 1% of viewport width
Example:
Width: 50vw; Occupies 50% of the width of the screen. vh (viewport height)
Assuming screen height
1vh = 1% of screen height
Example:
Height: 100vh; Occupies entire screen height.
Very useful for hero sections.
Vmin &vmax
Vmin= min(vw, vh)
Vmax = the larger of vw and vh
Use for advanced responsive design.
3 Auto Unit
Margin: auto;
Automatically code space.
Widely used to vertically center items
Example:
Width: 300px;
Margin: auto; Centers elemen.
Absolute vs Relative Units (Quick Comparison)
Absolute Units Relative Units
Static size Dynamic size
Equations for example: px Example: % px variable following this is a looplike snipe of code, the equalsymbol is an assignment operator. Example: rem
Not responsive Great for responsive design
Precise control Ability to create flexible arrangements
Best Practice in Modern Web Design
Most developers use:
Px -> for borders, small fixed elements.
Rem. (for font sizes, spacing, etc.)
% -> for width of lay out
Vh / vw -> for sections in full size
This combination makes websites responsive and elastic.
Simple Final Explanation
- It is how large something should be.
- If you want to go for fixed size use px.
- (size self=“size“dependson parent=””) Use%when size should depend on parent.
- Use rem to include the names of the fonts used. For example, Helvetica.
- Use vh / vw for screen dependent sizes.
Learning CSS Units allows you to build fully responsive, clean and professional looking websites without causing layout problems.
Check out our resources!
- Bootstrap Templates: Explore our Bootstrap Projects section.
- Free E-Books: Download your Free E-Books here.
