What are CSS percentages?

If you’ve used CSS, you’ve probably used percentage values. They look like this:

body {
  width: 90%;
  margin-left: 10%;
  line-height: 160%;
}

But what are they percentages of? It depends entirely on the property! For the width and margin-left properties, it’s a percentage of “the width of the containing block”. For the line-height property, it’s a percentage of “the font size of the element itself”. And so on, with rather idiosyncratic semantics for each CSS property.

At the bottom of this post is a full list of each CSS property that can take a percentage, along with the semantics for that percentage. But let’s look at a few themes.

Many layout properties are defined in terms of the element’s “containing block” (i.e. usually the element’s nearest block-level ancestor). For example, the width and height properties are percentages of the corresponding width and height of the containing block. Generally, horizontal lengths are percentages of the width of the containing block, and vertical lengths are percentages of the height of the containing block.

So what are margin-top, margin-bottom, padding-top, padding-bottom? Surprise: despite being vertical lengths, they’re percentages of the width of the containing block! Here’s an example:

<div id="square-wrapper">
  <div id="square"></div>
</div>
<style>
  #square-wrapper {
    width: 100px;
  }
  #square {
    background-color: yellow;
    padding-bottom: 100%;
  }
</style>

Due to the odd meaning of padding-bottom: 100%, this gives us a square:

Some properties can’t take percentages. For example, border-width can’t take a percentage. I can imagine it being defined in terms of “the width of the containing block”, but it isn’t.

Finally, here’s a full list of how percentages are interpreted. I scraped it from MDN.

For CSS properties ... ... a percentage means
outline-radius-bottomleft, outline-radius-bottomright, outline-radius-topleft, outline-radius-topright, border-bottom-left-radius, border-bottom-right-radius, border-end-end-radius, border-end-start-radius, border-radius, border-start-end-radius, border-start-start-radius, border-top-left-radius, border-top-right-radius refer to the corresponding dimension of the border box
content-zoom-limit-max The largest allowed zoom factor. A zoom factor of 100% corresponds to no zooming. Larger values zoom in. Smaller values zoom out.
content-zoom-limit-min The smallest allowed zoom factor. A zoom factor of 100% corresponds to no zooming. Larger values zoom in. Smaller values zoom out.
hyphenate-limit-zone calculated with respect to the width of the line box
mask-position-x, mask-position-y refer to the size of the box itself
background-position-x refer to width of background positioning area minus height of background image
background-position-y refer to height of background positioning area minus height of background image
background-position refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
background-size relative to the background positioning area
block-size, max-block-size, min-block-size block-size of containing block
border-block-end-width, border-block-start-width, border-block-width, border-inline-end-width, border-inline-start-width, border-inline-width, inset-inline-end, inset-inline-start, inset-inline, padding-block-end, padding-block-start, padding-block, padding-inline-end, padding-inline-start, padding-inline logical-width of containing block
border-image-slice refer to the size of the border image
border-image-width refer to the width or height of the border image area
bottom, top refer to the height of the containing block
column-gap (grid-column-gap), grid-auto-columns, grid-auto-rows, grid-template-columns, grid-template-rows, row-gap (grid-row-gap) refer to corresponding dimension of the content area
flex-basis refer to the flex container's inner main size
font-size refer to the parent element's font size
height The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.
inline-size, max-inline-size, min-inline-size inline-size of containing block
inset-block-end, inset-block-start, inset-block, inset logical-height of containing block
left, margin-bottom, margin-left, margin-right, margin-top, margin, max-width, min-width, padding-bottom, padding-left, padding-right, padding-top, padding, right, shape-margin, text-indent, width refer to the width of the containing block
line-height refer to the font size of the element itself
margin-block-end, margin-block-start, margin-block, margin-inline-end, margin-inline-start, margin-inline depends on layout model
max-height The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as none.
min-height The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0.
object-position refer to width and height of element itself
offset-distance refer to the total path length
perspective-origin, transform-origin, transform, translate refer to the size of bounding box
scroll-padding-block-end, scroll-padding-block-start, scroll-padding-block, scroll-padding-bottom, scroll-padding-inline-end, scroll-padding-inline-start, scroll-padding-inline, scroll-padding-left, scroll-padding-right, scroll-padding-top, scroll-padding relative to the scroll container's scrollport
scroll-snap-points-x, scroll-snap-points-y relative to same axis of the padding-box of the scroll container
text-size-adjust yes, refer to the corresponding size of the text font
vertical-align refer to the line-height of the element itself
word-spacing refer to the width of the affected glyph
I just released Vidrio, a free app for macOS and Windows to make your screen-sharing awesomely holographic. Vidrio shows your webcam video on your screen, just like a mirror. Then you just share or record your screen with Zoom, QuickTime, or any other app. Vidrio makes your presentations effortlessly engaging, showing your gestures, gazes, and expressions. #1 on Product Hunt. Available for macOS and Windows.

With Vidrio

With generic competitor

More by Jim

Tagged #programming, #css. All content copyright James Fisher 2019. This post is not associated with my employer. Found an error? Edit this page.