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:
The root element of the document (i.e., the html element)
When the root element of the document (i.e., thehtml
element) establishes a new block formatting context, the containing block is the viewport, which is the visible area of the browser window.Elements with a float property set to anything other than none
When an element has afloat
property set to anything other thannone
, 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.Elements with a position property set to absolute, fixed, sticky, or relative
When an element has aposition
property set toabsolute
,fixed
,sticky
, orrelative
, it establishes a new block formatting context and the containing block is the nearest ancestor element that also has aposition
property set toabsolute
,fixed
,sticky
, orrelative
. If no such ancestor element exists, then the containing block is the root element of the document.Elements with a display property set to table-cell, table-caption, inline-block, flex, or grid
When an element has adisplay
property set totable-cell
,table-caption
,inline-block
,flex
, orgrid
, it establishes a new block formatting context and the containing block is the nearest ancestor element that also has adisplay
property set totable-cell
,table-caption
,inline-block
,flex
, orgrid
. 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.
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 */
}
-
width
andheight
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 */
}
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 */
}
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.
Top comments (0)