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
Discussion on Hacker News.
Tagged #programming, #css.
👋 I'm Jim, a full-stack product engineer. Want to build an amazing product and a profitable business? Read more about me or Get in touch!

Similar posts

Resizable boxes in pure CSS!
The CSS resize property allows any element to be resized, not just <textarea>! But there are some gotchas. 2020-09-22
What are CSS variables?
CSS variables, also called custom properties, allow defining and using dynamic values in CSS. They cascade and inherit like other CSS properties, with the var() function used to reference them. 2019-12-21
The golden rule of PR reviews
The “golden rule” of code reviews is to approve improvements. Approve pull requests that fix bugs, even if the implementation isn’t ideal. 2023-10-07
Executables in npm?
NPM packages can contain executables, not just Node.js modules. NPM provides features to help distribute and run these executables, such as the bin field in package.json and the npm run-script command. 2020-10-02
Why is the contentRect of my NSWindow ignored?
Calling setFrameAutosaveName on an NSWindow causes its size and position to be saved to user defaults, overriding the contentRect passed to the constructor. To avoid this, do not call setFrameAutosaveName. 2020-07-10
What is simulated annealing?
Simulated annealing is a variation of trial-and-error optimization that generates mutations of the current best guess, and gradually reduces the magnitude of the mutations over time, similar to how metals cool. 2019-05-28

Similar posts

Resizable boxes in pure CSS!
The CSS resize property allows any element to be resized, not just <textarea>! But there are some gotchas. 2020-09-22
What are CSS variables?
CSS variables, also called custom properties, allow defining and using dynamic values in CSS. They cascade and inherit like other CSS properties, with the var() function used to reference them. 2019-12-21
Why can’t I set the font size of a visited link?
CSS visited link styles are limited for security reasons, as they could reveal a user’s browsing history. Color can be changed, but getComputedStyle will lie about it. 2019-03-08
Forging web security by escaping the browser viewport external link
2016-08-10
128 byte of CSS is enough
Limiting CSS to 128 bytes prevents bloat and distractions, allowing focus on content. 2016-11-15
The golden rule of PR reviews
The “golden rule” of code reviews is to approve improvements. Approve pull requests that fix bugs, even if the implementation isn’t ideal. 2023-10-07

More by Jim

What does the dot do in JavaScript?
foo.bar, foo.bar(), or foo.bar = baz - what do they mean? A deep dive into prototypical inheritance and getters/setters. 2020-11-01
Smear phishing: a new Android vulnerability
Trick Android to display an SMS as coming from any contact. Convincing phishing vuln, but still unpatched. 2020-08-06
A probabilistic pub quiz for nerds
A “true or false” quiz where you respond with your confidence level, and the optimal strategy is to report your true belief. 2020-04-26
Time is running out to catch COVID-19
Simulation shows it’s rational to deliberately infect yourself with COVID-19 early on to get treatment, but after healthcare capacity is exceeded, it’s better to avoid infection. Includes interactive parameters and visualizations. 2020-03-14
The inception bar: a new phishing method
A new phishing technique that displays a fake URL bar in Chrome for mobile. A key innovation is the “scroll jail” that traps the user in a fake browser. 2019-04-27
The hacker hype cycle
I got started with simple web development, but because enamored with increasingly esoteric programming concepts, leading to a “trough of hipster technologies” before returning to more productive work. 2019-03-23
Project C-43: the lost origins of asymmetric crypto
Bob invents asymmetric cryptography by playing loud white noise to obscure Alice’s message, which he can cancel out but an eavesdropper cannot. This idea, published in 1944 by Walter Koenig Jr., is the forgotten origin of asymmetric crypto. 2019-02-16
How Hacker News stays interesting
Hacker News buried my post on conspiracy theories in my family due to overheated discussion, not censorship. Moderation keeps the site focused on interesting technical content. 2019-01-26
My parents are Flat-Earthers
For decades, my parents have been working up to Flat-Earther beliefs. From Egyptology to Jehovah’s Witnesses to theories that human built the Moon billions of years in the future. Surprisingly, it doesn’t affect their successful lives very much. For me, it’s a fun family pastime. 2019-01-20
The dots do matter: how to scam a Gmail user
Gmail’s “dots don’t matter” feature lets scammers create an account on, say, Netflix, with your email address but different dots. Results in convincing phishing emails. 2018-04-07
The sorry state of OpenSSL usability
OpenSSL’s inadequate documentation, confusing key formats, and deprecated interfaces make it difficult to use, despite its importance. 2017-12-02
I hate telephones
I hate telephones. Some rational reasons: lack of authentication, no spam filtering, forced synchronous communication. But also just a visceral fear. 2017-11-08
The Three Ts of Time, Thought and Typing: measuring cost on the web
Businesses often tout “free” services, but the real costs come in terms of time, thought, and typing required from users. Reducing these “Three Ts” is key to improving sign-up flows and increasing conversions. 2017-10-26
Granddad died today
Granddad died. The unspoken practice of death-by-dehydration in the NHS. The Liverpool Care Pathway. Assisted dying in the UK. The importance of planning in end-of-life care. 2017-05-19
How do I call a program in C, setting up standard pipes?
A C function to create a new process, set up its standard input/output/error pipes, and return a struct containing the process ID and pipe file descriptors. 2017-02-17
Your syntax highlighter is wrong
Syntax highlighters make value judgments about code. Most highlighters judge that comments are cruft, and try to hide them. Most diff viewers judge that code deletions are bad. 2014-05-11

This page copyright James Fisher 2019. Content is not associated with my employer. Found an error? Edit this page.

Jim Fisher
CV
Speaking
Blogroll
RSS
TigYog
Kickabout