demo · v132
Which axis does anchor-size() read?
Four frames, four different axis arguments to anchor-size() — each puts the same little blue badge in a different place. Use this as a cheat-sheet for the four common patterns.
the four patterns in words
1. Constant pad scaled by anchor's width
Place a caption below an image; gap between them grows with the image. margin-top: anchor-size(--a width) reads the anchor's logical inline size and uses it as a vertical margin.
2. Constant pad scaled by anchor's height
Place a side-rail badge whose horizontal offset scales with the anchor's height — useful for tall blocks that want a hugging caption.
3. Pad scaled by the positioned element's own axis
anchor-size(self-inline) reads the positioned element's own inline-size instead of the anchor's, so the gap grows with the badge content.
4. Omit the anchor name, get the default
anchor-size(inline) — no name — reads the default position-anchor's inline size. Concise when you only have one anchor.