We use different units in everyday life for different types of measurements (centimeters (cm) for distance and kilograms (kg) for weight). In some places, people use pounds (lb) instead of kilograms. The key point is that units depend on what and where you are measuring.
Similarly, in CSS units are used to measure and define the values of various properties. You apply these units to control the size and spacing of elements, such as their margin, padding, height, and width.
There are many types of units in CSS, so sometimes it can be confusing to determine which unit is best for a particular value. Today you will learn the best use cases for CSS units.
The two basic types of CSS units are:
- Absolute units (fixed size)
- Relative units (variable size)
Absolute units are fixed that do not depend on the size of the parent element. For example, px (pixels), cm (centimeters), and mm (millimeters) are absolute units.
Relative units are flexible. These units are relative to the font size of their viewport or parent element. Examples of relative units are vw (viewport width), vh (viewport height), and em (depending on parent font-size).
Now, let us look at how some of the most commonly used CSS units work. These units are rem, em, vh, vw, %, and px.
Table of Content
Pixels (px)
px is an absolute unit used to define the size or length of elements on a screen. However, px don't scale well on different devices. Something that looks perfect on a laptop might appear too small on a mobile device. That's why web designers use relative units to make designs more responsive.
So when would you use pixels?
- Use pixels when you want fixed sizes that don't change with screen size.
pxis the best option for small elements, borders, and CSS art.- Avoid
pxfor responsive layouts, because they don't scale well on different devices.
<div class="box">
<p>This element has a fixed size using 15px units.</p>
</div>.box {
border: 2px solid blue;
font-size: 30px;
}
p {
font-size: 15px;
}
In the snippet above, you can see a <p> paragraph inside the div element. The class name of the <div> element is box. The font size of this box is set to 30 pixels, while the font size of the <p> paragraph is 15 pixels.
Here, the font size of the <p> is not related to the font size of the box. The text inside the <p> element remains the same size. Whether the browser size changes or not, the font size of the paragraph remains fixed at 15px and does not change.
Another important thing is responsive design. When you resize the browser, you will notice that the text inside the box does not change in size because it's defined in absolute units (pixels).
Examples of Using px in CSS
.img {
width: 300px;
height: 150px;
}
The <img> will always be 300px width and 150px height, no matter the screen size.
Root Em (rem)
rem is a relative CSS unit that stands for root em. It is relative to the font size of the root element. The root element of an HTML document is the <html> element, so 1rem equals the font size defined in <html>.
Most browsers set the root element font size to 16 pixels by default. In that case, 1rem is equal to 16px.
You can change the font size of the root element using CSS. For example, if you set the root element font size to 20px, then 1rem will equal 20px.
html {
font-size: 20px; /*= 1rem*/
}
Why use the rem unit?
- Adjusting a root font size can resize the entire layout.
- By using these units, you don’t have to manually adjust multiple font sizes.
Let's look at how to use rem with a simple example.
<div class="box">
<h1>This is heading 1</h1>
<p>This paragraph has a variable size using the 1rem unit.</p>
</div>
html {
font-size: 16px; /*= 1rem*/
}
.box {
border: 2px solid blue;
font-size: 30px;
}
h1 {
font-size: 1.5rem;
}
p {
font-size: 1rem;
}
In this example, the <div> element contains both <h1> and <p> tags. The font size of the <h1> element is 1.5rem, which means 16 × 1.5 = 24 pixels. It's one and a half times the root element or HTML element.
For your clarity, the font size of the box is set to 30 pixels. We know that rem units depend on the root element, so the font size of the box does not affect the rem units.
Here the root element has a font size of 16px:
Then the font size of the <h1> element will be 24px and the font size of the <p> will be 16px.
Em (em)
rem and em work similarly, but there is one key difference. The em unit is based on the font size of the closest parent element, not the root element. However, the parent element must have a defined font size for em to take effect.
Benefits of Using the em Unit are:
- Text and spacing adjust automatically as users zoom in.
- It works well for padding, margins, and layouts that follow the text size.
- When you change the parent font size, all child elements scale automatically.
Let's look at an example to understand better.
<div class="box">
<p>The font size is set to 2em based on the box.</p>
</div>.box {
border: 2px solid blue;
font-size: 10px;
}
p {
font-size: 2em;
}
In this example, the <p> closest parent element is the box, which has a font size of 10 pixels. The font size of the <p> element is set to 2em, which means 10 × 2 = 20px. It's double the font size of the parent element, the div element.
<p> element set at 2em.Let's look at another complex example.
<div class="blue">
<p>This is the child of blue.</p>
<div class="red">
<p>This is the child of red.</p>
</div>
</div>.blue {
font-size: 10px;
border: 2px solid blue;
padding: 10px;
}
.red {
font-size: 15px;
border: 2px solid red;
}
p {
font-size: 2em;
}
Here, you will see a the font size of both <p> elements is set to 2em. The parent of the first <p> element is the blue box, which has a font size of 10 pixels. Based on the blue element, the font size of the first <p> will be 2 × 10 = 20 pixels.
The closest parent element of the second <p> tag is the red box. If the font size of the red element was not given here, then the font size of the second <p> element would be relative to the blue element.
The font size of the red element is set to 15 pixels, so the font size of the second <p> becomes 15 × 2 = 30 pixels.
Percentage (%)
% is a relative unit, and its value is based on the size of the parent element. When you define a value using a %, the browsers calculate the size as a ratio of the parent element size. Percentages help create more responsive layouts for different screen sizes.
Why use the percentage unit in CSS?
- You can easily control the padding, margin, width, and height of elements without using fixed values.
- Percentage units are ideal for layouts that need to expand or shrink to fit the screen size.
Let's look at an example:
<div class="blue-box">
<div class="red-box"></div>
</div>
.blue-box {
width: 500px;
height: 100px;
background: blue;
}
.red-box {
width: 50%;
height: 80%;
background: red;
}
In this example, the width of the blue-box is set to 500 pixels, which is an absolute unit. The width of the red-box is set to 50%.
This means that the browser calculates the width of the red-box in proportion to the size of its parent element. So the red-box will be half the width of the blue-box (500 pixels × 50% = 250 pixels).
Similarly, the height of the red-box is set to 80%. That makes it 80px (100 pixels x 80%).
Another example is the transform method, which will not work without percentage units. This method centers the element using % units.
Viewport height (vh)
vh units in CSS stands for viewport height, and it's a relative unit. The value of the vh unit is based on the height of the browser window, the viewport.
50vh equals 50% of the total height of the browser window. If the browser window height is 800 pixels, then 50vh = 400 pixels.
The vh unit can also help center elements in the browser window. By setting the container height to 100vh and using the Flexbox method, you can easily align content both vertically and horizontally to the center of the screen.
Here's an example of vh units:
<div class="box"></div>.box {
height: 100vh;
background: blue;
}
In the snippet above, the box element height is set to 100vh, which means it covers the entire of the viewport height.
Let's change the box height.
<div class="box"></div>body {
background: red;
}
.box {
height: 40vh;
background: blue;
}
In this example, the height of the box element is set to 40vh, so it covers 40% of the viewport height.
The vh unit allows you to size elements based on the visible height of the browser window. This makes it easy to create flexible layouts. It ensures that elements always fill the visible area of the user's screen, no matter what device they are using.
Viewport width (vw)
vw unit is another viewport-based measurement, but it focuses on the width of the browser window. Both vh and vw work in a similar way, but vw measures the horizontal axis of the viewport.
100vw equals 100% of the width of the browser window. Whether the browser is wide or narrow, any sized element with vw will automatically adjust to the width of the viewport.
Here's an example:
<div class="box"></div>body {
background: red;
}
.box {
width: 40vw;
height: 100px;
background: blue;
}
Here, the width of the box element is set to 40vw. This makes it occupy 40% of the total width of the browser window. When you resize the browser or switch to a different device, the box will automatically adjust its width to maintain the same aspect ratio of the viewport.
The box element covers 40% of the viewport width.
Conclusion
Choosing the right CSS unit can be confusing, right? Once you know what each CSS unit is for, the choice will become clearer. Fixed units (px) are the best when you need something to stay the same size.
Flexible units (rem, em, and vh) help your design grow or shrink with the content, and viewport units make your layout responsive to the size of the screen.
When you think about doing something, for example -
- How do you make a layout responsive?
- How do you give text a fixed size?
- How do you adapt an element to a device?
Then you can choose the unit according to that purpose. With just a little practice, choosing the right unit will start to feel natural.
If you need CSS units instructions in the future, don't hesitate to read this article. Thank you for your time.
0 Comments