mozilla
Your Search Results

    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
    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
    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: tregagnon,