# CSS percentage values

This page lists all CSS properties and indicates on the meaning of percentages value for each of them.

Animations
Property Percentage values
`animation` N/A
`animation-delay` N/A
`animation-direction` N/A
`animation-duration` N/A
`animation-fill-mode` N/A
`animation-iteration-count` N/A
`animation-name` N/A
`animation-play-state` N/A
`animation-timing-function` N/A
Transitions
Property Percentage values
`transition` N/A
`transition-delay` N/A
`transition-duration` N/A
`transition-property` N/A
`transition-timing-function` N/A
Transforms
Property Percentage values
`transform` refer to the size of bounding box
`transform-origin` refer to the size of bounding box
`transform-style` N/A
`perspective` N/A
`perspective-origin` refer to the size of bounding box
`backface-visibility` N/A
Color
Property Percentage values
`color` N/A
`opacity` N/A
Columns
Property Percentage values
`columns` N/A
`column-width` N/A
`column-count` N/A
`column-gap` N/A
`column-rule` N/A
`column-rule-color` N/A
`column-rule-style` N/A
`column-rule-width` N/A
`break-before` N/A
`break-after` N/A
`break-inside` N/A
`column-span` N/A
`column-fill` N/A
Text
Property Percentage values
`hyphens` N/A
`letter-spacing` N/A
`word-wrap` N/A
`overflow-wrap` N/A
`text-transform` N/A
`tab-size` N/A
`text-align` N/A
`text-align-last` N/A
`text-indent` refer to the width of the containing block
`direction` N/A
`white-space` N/A
`word-break` N/A
`word-spacing` refer to the width of the affected glyph
Text decorations
Property Percentage values
`text-decoration` N/A
`text-decoration-color` N/A
`text-decoration-style` N/A
`text-decoration-line` N/A
`text-decoration-skip` N/A
`text-shadow` N/A
`text-underline-position` N/A
Flexible boxes
Property Percentage values
`align-content` N/A
`align-items` N/A
`align-self` N/A
`flex-basis` refer to the flex container's inner main size
`flex-direction` N/A
`flex-flow` N/A
`flex-grow` N/A
`flex-shrink` N/A
`flex` N/A
`flex-wrap` N/A
`justify-content` N/A
`order` N/A
Background & Borders
Property Percentage values
`background` The values of its longhand properties the percentage value belongs to:
• `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
`background-attachment` N/A
`background-clip` N/A
`background-color` N/A
`background-image` N/A
`background-origin` N/A
`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-repeat` N/A
`background-size` relative to the background positioning area
`border` N/A
`border-bottom` N/A
`border-bottom-color` N/A
`border-bottom-left-radius` refer to the corresponding dimension of the border box
`border-bottom-right-radius` refer to the corresponding dimension of the border box
`border-bottom-style` N/A
`border-bottom-width` N/A
`border-color` N/A
`border-image` The values of its longhand properties the percentage value belongs to:
• `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
`border-image-outset` N/A
`border-image-repeat` N/A
`border-image-slice` refer to the size of the border image
`border-image-source` N/A
`border-image-width` refer to the width or height of the border image area
`border-left` N/A
`border-left-color` N/A
`border-left-style` N/A
`border-left-width` N/A
`border-radius` refer to the corresponding dimension of the border box
`border-right` N/A
`border-right-color` N/A
`border-right-style` N/A
`border-right-width` N/A
`border-style` N/A
`border-top` N/A
`border-top-color` N/A
`border-top-left-radius` refer to the corresponding dimension of the border box
`border-top-right-radius` refer to the corresponding dimension of the border box
`border-top-style` N/A
`border-top-width` N/A
`border-width` N/A
Box Model
Property Percentage values
`box-decoration-break` N/A
`box-shadow` N/A
`margin` refer to the width of the containing block
`margin-bottom` refer to the width of the containing block
`margin-left` refer to the width of the containing block
`margin-right` refer to the width of the containing block
`margin-top` refer to the width of the containing block
`padding` refer to the width of the containing block
`padding-bottom` refer to the width of the containing block
`padding-left` refer to the width of the containing block
`padding-right` refer to the width of the containing block
`padding-top` refer to the width of the containing block
`box-sizing` N/A
`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`.
`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.
`max-width` refer to the width of the containing block
`min-width` refer to the width of the containing block
`width` refer to the width of the containing block
`overflow` N/A
`overflow-x` N/A
`overflow-y` N/A
`visibility` N/A
Table
Property Percentage values
`border-collapse` N/A
`border-spacing` N/A
`caption-side` N/A
`empty-cells` N/A
`table-layout` N/A
`vertical-align` refer to the line-height of the element itself
Positioning
Property Percentage values
`bottom` refer to the height of the containing block
`left` refer to the width of the containing block
`right` refer to the width of the containing block
`top` refer to the height of the containing block
`float` N/A
`clear` N/A
`position` N/A
`z-index` N/A
Fonts
Property Percentage values
`font` The values of its longhand properties the percentage value belongs to:
• `font-size`: refer to the parent element's font size
• `line-height`: refer to the font size of the element itself
`font-family` N/A
`font-variant` N/A
`font-weight` N/A
`font-stretch` N/A
`font-size` refer to the parent element's font size
`line-height` refer to the font size of the element itself
`font-feature-settings` N/A
`font-size-adjust` N/A
`font-style` N/A
Images
Property Percentage values
`image-rendering` N/A
`image-orientation` N/A
Counters & Lists
Property Percentage values
`counter-increment` N/A
`counter-reset` N/A
`list-style` N/A
`list-style-image` N/A
`list-style-position` N/A
`list-style-type` N/A
Page
Property Percentage values
`orphans` N/A
`page-break-after` N/A
`page-break-before` N/A
`page-break-inside` N/A
`widows` N/A
User interface
Property Percentage values
`outline` N/A
`outline-color` N/A
`outline-width` N/A
`outline-style` N/A
`outline-offset` N/A
`cursor` N/A
`resize` N/A
`text-overflow` N/A
Generated content
Property Percentage values
`content` N/A
`quotes` N/A
Miscellaneous
Property Percentage values
`clip` N/A
`display` N/A
`unicode-bidi` N/A
`ime-mode` N/A
`all` N/A
Compositing and Blending
Property Percentage values
`background-blend-mode` N/A
`mix-blend-mode` N/A

Tags: