Measurement Units in CSS

CSS Measurement Units: A Detailed Guide

In CSS, measurements help define the position, size, and spacing of elements. Some of the most commonly used properties include left, top, width, height, margin, and padding. Let's dive deep into these properties and understand how they work.

---

1. Positioning Elements: left, top, right, bottom

These properties are used to move elements from a particular reference point. Their behavior depends on the position property:

• absolute – Positions the element relative to the nearest positioned ancestor (excluding static elements).
• relative – Moves the element relative to its normal position.
• fixed – Positions the element relative to the viewport.
• sticky – Moves the element based on scroll.

Example 1: left, top, right, bottom with position: absolute;

.box {
  position: absolute;
  left: 50px;  /* Moves the box 50px from the left */
  top: 30px;   /* Moves the box 30px from the top */
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

Explanation:

• This div moves 50 pixels from the left edge of its nearest positioned ancestor.
• It moves 30 pixels from the top.
• It will not move unless the position is set to absolute, relative, fixed, or sticky.

Example 2: Using relative positioning

.box {
  position: relative;
  left: 20px;
  top: 10px;
  background-color: lightgreen;
}

Explanation:

• The box moves 20 pixels right and 10 pixels down, but it still occupies its original space.

---

2. Setting Size: width and height

The width and height properties control the size of an element. You can specify them in different units:

Units Used in width and height:

• Absolute units:
  • px (pixels) → Fixed size.
  • cm, mm, in → Rarely used in screens but useful for print.
• Relative units:
  • % → Relative to parent.
  • vw (viewport width) → Relative to the screen width.
  • vh (viewport height) → Relative to the screen height.
  • em, rem → Relative to font size.

Example 3: Using px, %, vw, and vh

.box1 {
  width: 300px;   /* Fixed width */
  height: 200px;
  background-color: lightcoral;
}

.box2 {
  width: 50%;     /* 50% of the parent width */
  height: 30%;
  background-color: lightgoldenrodyellow;
}

.box3 {
  width: 80vw;    /* 80% of the viewport width */
  height: 50vh;   /* 50% of the viewport height */
  background-color: lightpink;
}

Explanation:

• box1 has a fixed size (300px × 200px).
• box2 takes 50% of its parent's width and 30% of its parent's height.
• box3 is 80% of the screen width and 50% of the screen height.

---

3. Margins and Padding

Margins and padding control spacing outside and inside an element.

• margin: Adds space outside the element.
• padding: Adds space inside the element (between content and border).

Example 4: margin and padding

.box {
  width: 200px;
  height: 100px;
  background-color: lightseagreen;
  
  margin: 20px;   /* Space outside */
  padding: 10px;  /* Space inside */
}

Explanation:

• The box has 200px width and 100px height.
• margin: 20px → Adds 20px space around the box.
• padding: 10px → Creates 10px space inside before the content starts.

Shorthand for margin and padding

You can use four values to define top, right, bottom, and left in one line.

.box {
  margin: 10px 20px 30px 40px; /* top right bottom left */
  padding: 5px 10px; /* top-bottom left-right */
}

• 10px → Top
• 20px → Right
• 30px → Bottom
• 40px → Left

---

4. max-width, min-width, max-height, min-height

These properties ensure elements don’t shrink too much or grow too big.

Example 5: Preventing Overflow

.box {
  width: 50%;
  min-width: 200px;
  max-width: 500px;
  background-color: lightgray;
}

Explanation:

• The width is 50% of the parent.
• It cannot be smaller than 200px (min-width).
• It cannot be larger than 500px (max-width).

---

5. box-sizing Property

By default, width and height do not include padding and border. The box-sizing property controls this.

• content-box (default): Only the content is measured, padding and border add extra space.
• border-box: Width includes padding and border.

Example 6: box-sizing Difference

.box1 {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box;
}

.box2 {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
}

Explanation:

• box1's actual width = 200px (content) + 20px (padding) × 2 + 5px (border) × 2 = 250px.
• box2's actual width = 200px (includes everything).

Always use box-sizing: border-box; to avoid unexpected layout issues.

---

6. overflow Property

If the content inside an element is larger than the assigned width and height, we use overflow:

• visible → Default. Content spills outside.
• hidden → Cuts off extra content.
• scroll → Adds a scrollbar.
• auto → Scrollbar only when needed.

Example 7: Handling Overflow

.box {
  width: 200px;
  height: 100px;
  overflow: auto; /* Scrollbar only when needed */
  border: 2px solid black;
}

---

Summary

Property	Meaning
left, top, right, bottom	Moves elements based on position
width, height	Defines the size
margin	Space outside the element
padding	Space inside the element
max-width, min-width, max-height, min-height	Limits size
box-sizing	Defines how width is calculated
overflow	Handles excess content

---

CSS Measurement Units Explained in Detail with Examples

CSS provides different measurement units to define sizes, positions, and spacing. Understanding how they work is crucial for creating responsive and scalable designs. Let's go deeper into percentage (%), viewport width (vw), viewport height (vh), em, and rem, along with practical examples.

---

1. Percentage (%) – Relative to Parent Element

The % unit defines a size relative to the parent element.

Example 1: width: 50% and height: 50%

.parent {
  width: 400px;
  height: 200px;
  background-color: lightgray;
}

.child {
  width: 50%;  /* 50% of parent's width (400px * 50%) = 200px */
  height: 50%; /* 50% of parent's height (200px * 50%) = 100px */
  background-color: lightblue;
}

<div class="parent">
  <div class="child">50% Width & Height</div>
</div>

Explanation

• The .child element is 200px wide (50% of 400px) and 100px tall (50% of 200px).
• If the .parent size changes, the .child will adjust automatically.

Important Notes

• width: % is relative to the parent element's width.
• height: % works only if the parent has a defined height.

---

2. vw (Viewport Width) – Relative to Screen Width

The vw unit stands for viewport width, where:

• 1vw = 1% of the screen width.

Example 2: vw in Action

.box {
  width: 50vw;  /* 50% of the screen width */
  height: 100px;
  background-color: lightcoral;
}

<div class="box">50vw Wide</div>

Explanation

• If the screen width is 1000px, then 50vw is 500px.
• If you resize the window, the .box resizes dynamically.

When to Use vw

• Perfect for full-width elements (e.g., hero sections, banners).
• Avoids using px, making layouts more flexible.

---

3. vh (Viewport Height) – Relative to Screen Height

The vh unit is similar to vw, but for height:

• 1vh = 1% of the viewport height.

Example 3: vh for Full-Screen Sections

.full-screen {
  width: 100vw;
  height: 100vh; /* Full-screen height */
  background-color: lightseagreen;
}

<div class="full-screen">Full Screen</div>

Explanation

• 100vh makes the .full-screen take the entire screen height.
• Ideal for fullscreen backgrounds or hero sections.

When to Use vh

• Creating fullscreen landing pages.
• Ensuring sections take up a fixed portion of the screen.

---

4. em – Relative to Parent Font Size

The em unit is relative to the font size of the parent element.

• 1em = 100% of the parent font size.
• 2em = 200% (twice the font size).
• Nested em values multiply.

Example 4: em Scaling with Parent Font

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em;  /* 1.5 times parent font size (20px * 1.5) = 30px */
}

<div class="parent">
  Parent Text (20px)
  <div class="child">Child Text (30px)</div>
</div>

Explanation

• .parent has a font size of 20px.
• .child is 1.5em, meaning 30px (20px * 1.5).
• If .parent changes to 25px, .child automatically scales (25px * 1.5 = 37.5px).

When to Use em

• Makes text proportional to its parent.
• Useful for scalable buttons and nested elements.

---

5. rem – Relative to Root Font Size

The rem unit is similar to em, but instead of being relative to the parent, it is relative to the root (<html>) font size.

• 1rem = 100% of root font-size (usually 16px in browsers).
• 2rem = Twice the root font-size.

Example 5: rem for Consistent Sizing

html {
  font-size: 16px; /* Default root font size */
}

.box {
  font-size: 2rem; /* 2 * 16px = 32px */
}

<div class="box">Text is 32px</div>

Explanation

• The default browser font size is 16px.
• 2rem makes the .box text 32px (16px * 2).
• Unlike em, rem does not get affected by parent elements.

When to Use rem

• Ideal for global styles (e.g., headings, paragraphs).
• Ensures consistent scaling across the page.

---

Comparison Table

Unit	Relative To	Example
%	Parent element	width: 50% (50% of parent width)
vw	Viewport width	width: 50vw (50% of screen width)
vh	Viewport height	height: 100vh (Full-screen height)
em	Parent font size	font-size: 2em (2× parent size)
rem	Root font size	font-size: 2rem (2× <html> font size)

---

Final Thoughts

• % is relative to parent and great for flexible layouts.
• vw and vh are relative to the screen, making them useful for fullscreen designs.
• em depends on the parent, which can cause unexpected scaling in nested elements.
• rem is consistent, making it better for global text styles.

 

 Contact us for software training, education or development