Skip to content

Clarify descriptions of CSS dimension data types #41523

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
estelle merged 2 commits into from
Oct 14, 2025
Merged

Clarify descriptions of CSS dimension data types #41523

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
61a9e4d
Clarify descriptions of CSS dimension data types
estelle Oct 14, 2025
4749fe3
Apply suggestions from code review
estelle Oct 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions files/en-us/web/css/css_values_and_units/css_data_types/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,21 +48,21 @@ These types include keywords and identifiers as well as strings, and URLs.
These data types are used to indicate quantities, indexes, and positions. The majority of these are defined in the CSS values and units module, however additional types are described in other modules where they are specific to that specification alone — for example the `fr` unit in the [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module.

- {{cssxref("<integer>")}}
- : One or more decimal units 0 through 9.
- : One or more decimal units 0 through 9, optionally preceded by - or +.
- {{cssxref("<number>")}}
- : Real numbers which may also have a fractional component, for example 1 or 1.34.
- : Real numbers which may also have a fractional component, for example `1` or `1.34`.
- {{cssxref("<dimension>")}}
- : A number with a unit attached to it, for example 23px or 15em.
- : A number with a unit attached to it, including distances ({{cssxref("<length>")}}), durations ({{cssxref("<time>")}}), frequencies ({{cssxref("<frequency>")}}), resolutions ({{cssxref("<resolution>")}}), and other quantities; for example `90deg`, `50ms` or `15em`.
- {{cssxref("<percentage>")}}
- : A number with a percentage sign attached to it, for example 10%.
- : A number with a percentage sign attached to it, for example `10%`.
- {{cssxref("<ratio>")}}
- : A ratio, written with the syntax `<number> / <number>`.
- {{cssxref("&lt;flex&gt;")}}
- : A flexible length introduced for [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout), written as a `<number>` with the `fr` unit attached and used for grid track sizing.

## Quantities

These types are used to specify distance and other quantities.
These {{cssxref("&lt;dimension&gt;")}} types are used to specify distance and other quantities.

- {{cssxref("&lt;length&gt;")}}
- : Lengths are a `<dimension>` and refer to distances.
Expand All @@ -77,7 +77,7 @@ These types are used to specify distance and other quantities.

## Combinations of types

Some CSS properties can take a dimension or a percentage value. In this case the percentage value will be resolved to a quantity that matches the allowable dimension. Properties which can accept a percentage in addition to a dimension will use one of the types listed below.
Some CSS properties can take a {{cssxref("&lt;dimension&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} value. In this case the percentage value will be resolved to a quantity that matches the allowable dimension. Properties which can accept a percentage in addition to a dimension will use one of the types listed below.

- {{cssxref("&lt;length-percentage&gt;")}}
- : A type that can accept a length or a percentage as a value.
Expand Down