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
transform-box 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
white-space N/A
word-break N/A
word-spacing refer to the width of the affected glyph
line-break N/A
text-size-adjust yes, refer to the corresponding size of the text font
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
Writing modes
Property Percentage values
direction N/A
unicode-bidi N/A
writing-mode N/A
text-orientation N/A
text-combine-upright 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-language-override N/A
font-size-adjust N/A
font-style N/A
font-synthesis N/A
font-kerning N/A
font-variant-ligatures N/A
font-variant-position N/A
font-variant-caps N/A
font-variant-numeric N/A
font-variant-east-asian N/A
font-variant-alternates N/A
Images
Property Percentage values
object-fit N/A
object-position refer to width and height of element itself
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
Fragmentation
Property Animatable
box-decoration-break N/A
Miscellaneous
Property Percentage values
clip N/A
display N/A
ime-mode N/A
all N/A
will-change N/A
text-rendering N/A
Compositing and Blending
Property Percentage values
background-blend-mode N/A
mix-blend-mode N/A
isolation N/A
Shapes
Property Percentage values
shape-outside N/A
shape-margin refer to the width of the element’s containing block
shape-image-threshold N/A
Pointer Events
Property Percentage values
touch-action N/A
pointer-events N/A
Inline
Property Percentage values
initial-letter N/A
initial-letter-align N/A
Display
Property Percentage values
display-inside N/A
display-outside N/A
display-list N/A
box-suppress N/A
CSSOM View
Property Percentage values
scroll-behavior N/A
Logical Properties
Property Percentage values
block-size block-size of containing block
inline-size inline-size of containing block
min-block-size block-size of containing block
min-inline-size inline-size of containing block
max-block-size block-size of containing block
max-inline-size inline-size of containing block
margin-block-start depends on layout model
margin-block-end depends on layout model
margin-inline-start depends on layout model
margin-inline-end depends on layout model
offset-block-start logical-height of containing block
offset-block-end logical-height of containing block
offset-inline-start logical-width of containing block
offset-inline-end logical-width of containing block
padding-block-start logical-width of containing block
padding-block-end logical-width of containing block
padding-inline-start logical-width of containing block
padding-inline-end logical-width of containing block
border-block-start-width logical-width of containing block
border-block-end-width logical-width of containing block
border-inline-start-width logical-width of containing block
border-inline-end-width logical-width of containing block
border-block-start-style N/A
border-block-end-style N/A
border-inline-start-style N/A
border-inline-end-style N/A
border-block-start-color N/A
border-block-end-color N/A
border-inline-start-color N/A
border-inline-end-color N/A
border-block-start The values of its longhand properties the percentage value belongs to:
  • border-width: N/A
  • border-style: N/A
  • color: N/A
border-block-end The values of its longhand properties the percentage value belongs to:
  • border-width: N/A
  • border-style: N/A
  • color: N/A
border-inline-start The values of its longhand properties the percentage value belongs to:
  • border-width: N/A
  • border-style: N/A
  • color: N/A
border-inline-end The values of its longhand properties the percentage value belongs to:
  • border-width: N/A
  • border-style: N/A
  • color: N/A
Ruby
Property Percentage values
ruby-position N/A
ruby-merge N/A
ruby-align N/A
Scroll Snap Points
Property Percentage values
scroll-snap-type N/A
scroll-snap-points-x relative to same axis of the padding-box of the scroll container
scroll-snap-points-y relative to same axis of the padding-box of the scroll container
scroll-snap-destination relative to same axis of the padding-box of the scroll container
scroll-snap-coordinate refer to the element’s border box
Device Adaption
Property Percentage values
@viewport/min-width refer to the width of the initial viewport
@viewport/max-width refer to the width of the initial viewport
@viewport/width The values of its longhand properties the percentage value belongs to:
  • @viewport/min-width: refer to the width of the initial viewport
  • @viewport/max-width: refer to the width of the initial viewport
@viewport/min-height refer to the height of the initial viewport
@viewport/max-height refer to the height of the initial viewport
@viewport/height The values of its longhand properties the percentage value belongs to:
  • @viewport/min-height: refer to the height of the initial viewport
  • @viewport/max-height: refer to the height of the initial viewport
@viewport/zoom the zoom factor itself
@viewport/min-zoom the zoom factor itself
@viewport/max-zoom the zoom factor itself
@viewport/user-zoom N/A
@viewport/orientation N/A

 

Document Tags and Contributors

Tags: 
Last updated by: Sebastianz,