Understanding the Reference Element and Percentage Values in CSS

When working with CSS, it's important to understand how percentage values are calculated for different properties. In many cases, the value of a percentage is relative to a reference element, which can vary depending on the property in question. In this post, we'll explore the reference element and value of percentage for some common CSS properties, along with some examples to help illustrate these concepts.

The containing block is the nearest ancestor element that establishes a new block formatting context. A block formatting context is a part of the CSS layout where the positioning and clear properties of elements are applied. There are several ways to establish a new block formatting context, such as:

1. The root element of the document (i.e., the html element)
   When the root element of the document (i.e., the html element) establishes a new block formatting context, the containing block is the viewport, which is the visible area of the browser window.

2. Elements with a float property set to anything other than none
   When an element has a float property set to anything other than none, it establishes a new block formatting context and the containing block is the nearest ancestor element that is not also floated and has a specified width.

3. Elements with a position property set to absolute, fixed, sticky, or relative
   When an element has a position property set to absolute, fixed, sticky, or relative, it establishes a new block formatting context and the containing block is the nearest ancestor element that also has a position property set to absolute, fixed, sticky, or relative. If no such ancestor element exists, then the containing block is the root element of the document.

4. Elements with a display property set to table-cell, table-caption, inline-block, flex, or grid
   When an element has a display property set to table-cell, table-caption, inline-block, flex, or grid, it establishes a new block formatting context and the containing block is the nearest ancestor element that also has a display property set to table-cell, table-caption, inline-block, flex, or grid. If no such ancestor element exists, then the containing block is the root element of the document.

After exploring the meaning of the containing block, we can move on to understanding how percentage values are calculated for certain properties, such as font-size, width, height, margin, and padding, using the containing block as the reference element.

1. font-size

The font-size property sets the size of the font for an element. When a percentage value is used for this property, the reference element is the font size of the parent element. However, if the parent element doesn't have a specified font size, the containing block's font size is used instead.

.container {
  font-size: 16px;
}

.child {
  font-size: 50%;
  /* font-size = 50% of parent font-size (16px) = 8px */
}

1. width and height

The width and height properties set the width and height of an element, respectively. When a percentage value is used for these properties, the reference element is the width or height of the containing block. If the containing block doesn't have a specified width or height, the browser's default value is used instead.

.container {
  width: 200px;
}

.child {
  width: 50%;
  /* width = 50% of parent width (200px) = 100px */
}

1. margin

The margin property sets the margin of an element, which is the space outside of the element's border. When a percentage value is used for this property, the reference element is the width of the containing block, unless the element has been positioned absolutely or has a floated ancestor. In those cases, the reference element is the width of the nearest positioned ancestor element.

.container {
  width: 200px;
  margin-left: 50px;
}

.child {
  margin-left: 25%;
  /* margin-left = 25% of parent width (200px) - parent margin-left (50px) = 0 */
}

1. padding

The padding property sets the padding of an element, which is the space inside of the element's border. When a percentage value is used for this property, the reference element is the width of the containing block, regardless of any positioning or floating.

.container {
  width: 200px;
}

.child {
  padding: 10%;
  /* padding = 10% of parent width (200px) = 20px */
}

In conclusion, understanding the reference element and value of percentage for different CSS properties is key to creating layouts that are flexible and responsive. By keeping these concepts in mind, you can create CSS that works for a variety of viewports.