diff --git a/files/en-us/glossary/extrinsic_size/index.md b/files/en-us/glossary/extrinsic_size/index.md new file mode 100644 index 000000000000000..44f596ae3a3c07c --- /dev/null +++ b/files/en-us/glossary/extrinsic_size/index.md @@ -0,0 +1,23 @@ +--- +title: Extrinsic size +slug: Glossary/Extrinsic_size +page-type: glossary-definition +sidebar: glossarysidebar +--- + +In CSS, the **extrinsic size** of an element is determined by its layout context, that is, by constraints imposed from outside the element, without regard for its contents. This is the opposite of an element's {{glossary("intrinsic size")}}, which is based on its content. + +Extrinsic sizing occurs when you explicitly set or constrain the size of an element using [CSS box model](/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model) properties such as {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("block-size")}}, {{cssxref("inline-size")}}, {{cssxref("max-width")}}, and {{cssxref("min-height")}}. +For example, when you set `width: 200px`, you're specifying an extrinsic size. + +Percentage values are also extrinsic; they're calculated relative to the element's [containing block](/en-US/docs/Web/CSS/Containing_block). +For example, `width: 50%` means the width of the element will be `50%` of the width of its containing block, regardless of the content inside the element. + +Block-level elements are sized extrinsically. When a width isn't specified, the block element's default width is `auto`, which resolves to `100%` width of its containing block. + +## See also + +- Related glossary terms: + - {{glossary("Intrinsic size")}} +- [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module +- [CSS Box Sizing Module Level 3](https://drafts.csswg.org/css-sizing-3/#extrinsic) specification diff --git a/files/en-us/glossary/intrinsic_size/index.md b/files/en-us/glossary/intrinsic_size/index.md index 64240f159070ce6..75e25ce4eaea7dc 100644 --- a/files/en-us/glossary/intrinsic_size/index.md +++ b/files/en-us/glossary/intrinsic_size/index.md @@ -5,19 +5,19 @@ page-type: glossary-definition sidebar: glossarysidebar --- -In CSS, the _intrinsic size_ of an element is the size it would be based purely on its content without taking into account the effects of the context it appears in. For example, the sizing applied by CSS [box model](/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model) properties. An element's intrinsic sizes are represented by its {{cssxref("min-content")}} and {{cssxref("max-content")}} sizes. +In CSS, the **intrinsic size** of an element is the size it would have based purely on its content, without taking into account the effects of the layout context it appears in. This is the opposite of an element's {{glossary("extrinsic size")}}, which is determined by external constraints such as container size. An element's intrinsic sizes are represented by its {{cssxref("min-content")}} and {{cssxref("max-content")}} sizes. -Inline elements are sized intrinsically: [sizing](/en-US/docs/Web/CSS/CSS_box_sizing) and [box](/en-US/docs/Web/CSS/CSS_box_model) properties including {{cssxref("height")}}, {{cssxref("width")}}, {{cssxref("block-size")}}, {{cssxref("inline-size")}}, and {{cssxref("padding-block")}} and {{cssxref("margin-block")}} have no impact on them ( though {{cssxref("margin-inline")}} and {{cssxref("padding-inline")}} do). +Inline elements are sized intrinsically. CSS [box model](/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model) properties such as {{cssxref("height")}}, {{cssxref("width")}}, {{cssxref("block-size")}}, {{cssxref("inline-size")}}, {{cssxref("padding-block")}}, and {{cssxref("margin-block")}} have no impact on their layout (though {{cssxref("margin-inline")}} and {{cssxref("padding-inline")}} do affect spacing within a line). -For example, the minimum intrinsic size of the inline {{htmlelement("span")}} element is the minimum size it would have if it was floated (with no other CSS box properties applied), inside a container with an inline-size of `0px`. The maximum intrinsic size is the opposite. It is the size the same `` would have if its container's inline size were infinite. +For example, the minimum intrinsic size of the inline {{htmlelement("span")}} element is the smallest size it would have if it were floated (with no other CSS box properties applied) in a container with `inline-size: 0`. The maximum intrinsic size is the opposite; it's the size the same `` would have when placed in a container with an infinite `inline-size`. Intrinsic size has the same meaning for images as for text — the size at which the images are displayed if no CSS is applied to change the rendering. -Pixel density and resolution affect intrinsic size. By default, images are assumed to have a "1x" pixel density (1 device pixel = 1 CSS pixel), in which case the intrinsic size is simply the pixel height and width. An image's intrinsic size and resolution can be explicitly specified in its {{Glossary("EXIF")}} data. Image pixel density may also be set for images using the [`srcset`](/en-US/docs/Web/HTML/Reference/Elements/img#srcset) attribute. Note that, if both mechanisms are used, the `srcset` value is applied "over" the EXIF value. +Pixel density and resolution affect intrinsic size. By default, images are assumed to have a "1x" pixel density (1 device pixel = 1 CSS pixel), in which case the intrinsic size is simply the pixel height and width. An image's intrinsic size and resolution can be explicitly specified in its {{Glossary("EXIF")}} data. Image pixel density may also be set for images using the [`srcset`](/en-US/docs/Web/HTML/Reference/Elements/img#srcset) attribute. Note that if both mechanisms are used, the `srcset` value is applied "over" the EXIF value. -Intrinsic sizes and how they are calculated are defined in the [CSS sizing module](/en-US/docs/Web/CSS/CSS_box_sizing). +Intrinsic sizes and how they are calculated are defined in the [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module. -#### minimum intrinsic size +## Minimum intrinsic size To set an element according to its minimum intrinsic size, set the {{cssxref("inline-size")}} (or {{cssxref("width")}} in horizontal writing modes, like English and Hebrew) to {{cssxref("min-content")}}. This sets the element to the size it would be if the text was wrapped as small as possible in the inline direction without causing an overflow, with as much soft-wrapping as possible. For a box containing a string of text, the minimum intrinsic size would be defined by the longest word. @@ -32,11 +32,11 @@ p { } ``` -{{ EmbedLiveSample('minimum intrinsic size', '100%', '220') }} +{{EmbedLiveSample('minimum intrinsic size', '100%', '220')}} -#### maximum intrinsic size +## Maximum intrinsic size -The maximum intrinsic size is the opposite. It is the element's size if the container's inline size were infinite. Text content would display as wide as possible, with no soft-wrapping, even if it overflowed its container. The keyword value {{cssxref("max-content")}} sets this behavior. +The maximum intrinsic size is the opposite. It is the element's size if the container's inline size were infinite. Text content would display as wide as possible, with no soft-wrapping, even if it overflows its container. The keyword value {{cssxref("max-content")}} sets this behavior. ```html hidden

Element grows as text doesn't wrap.

@@ -54,15 +54,13 @@ p { } ``` -{{ EmbedLiveSample('maximum intrinsic size', '100%', '200') }} - -## Extrinsic sizing - -The opposite of _intrinsic size_ is **_extrinsic size_**, which is based on the context of an element, without regard for its contents. Extrinsic sizing is determined by box model property values. With extrinsic sizing, percentages specify the size of a box with respect to the box's containing block. +{{EmbedLiveSample('maximum intrinsic size', '100%', '200')}} ## See also -- CSS {{cssxref("min-content")}}, {{cssxref("max-content")}}, and {{cssxref("fit-content")}} property values. +- Related glossary terms: + - {{glossary("Extrinsic size")}} +- CSS {{cssxref("min-content")}}, {{cssxref("max-content")}}, and {{cssxref("fit-content")}} sizing keywords - {{cssxref("interpolate-size")}} - {{cssxref("aspect-ratio")}} - {{cssxref("calc-size()")}} diff --git a/files/en-us/web/css/css_box_sizing/index.md b/files/en-us/web/css/css_box_sizing/index.md index 294f959d5d218b1..d8b137c471cad6b 100644 --- a/files/en-us/web/css/css_box_sizing/index.md +++ b/files/en-us/web/css/css_box_sizing/index.md @@ -8,7 +8,7 @@ spec-urls: sidebar: cssref --- -The **CSS box sizing** module enables developers to specify how elements fit their content or fit into a particular layout context. It defines sizing, minimum sizing, and maximum sizing properties, and also extends the CSS sizing properties with keywords that represent content-based {{glossary("intrinsic size")}} and context-based [extrinsic](/en-US/docs/Glossary/Intrinsic_Size#extrinsic_sizing) size. +The **CSS box sizing** module enables you to specify how elements fit their content or fit into a particular layout context. It defines sizing, minimum sizing, and maximum sizing properties, and also extends the CSS sizing properties with keywords that represent content-based {{glossary("intrinsic size")}} and context-based {{glossary("extrinsic size")}}. Elements can either be extrinsically or intrinsically sized. The [CSS box model](/en-US/docs/Web/CSS/CSS_box_model) defines page-relative properties to explicitly, or "extrinsically" set an element's size, including `width`, `height`, `padding`, and `margin` properties (along with `border` properties defined in the [CSS backgrounds and borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) module). This CSS box sizing module extends the CSS box model module to enable an element to be sized intrinsically — setting element size based on the size of its content. @@ -51,7 +51,8 @@ The CSS box sizing module also introduces the `min-intrinsic-sizing` property. C ### Glossary terms -- {{glossary("intrinsic size")}} +- {{glossary("Intrinsic size")}} +- {{glossary("Extrinsic size")}} ## Guides diff --git a/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md b/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md index 4bb7418cdf4d377..5441b745cc0a130 100644 --- a/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md +++ b/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md @@ -74,7 +74,7 @@ You will have noticed the word "preferred" in the definitions above. The `aspect When both the height and width or inline and block sizes are explicitly set, the `aspect-ratio` property value is ignored. In this case, no dimension is allowed to be automatically sized - the preferred sizes are explicitly set - so the `aspect-ratio` property has no effect. When you declare both the inline and block dimensions, those take precedence. -With replaced elements, if you don't explicitly set a value (other than `auto`) to either dimension, both will default to their intrinsic size (any `aspect-ratio` value isn't applied). The `aspect-ratio` will apply to non-replaced elements that don't have a dimension explicitly set, as non-replaced elements are either [intrinsically](/en-US/docs/Glossary/Intrinsic_Size) or [extrinsically](/en-US/docs/Glossary/Intrinsic_Size#extrinsic_sizing) sized, getting their size from their content, container, [box model](/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model) properties, etc. +With replaced elements, if you don't explicitly set a value (other than `auto`) to either dimension, both will default to their intrinsic size (any `aspect-ratio` value isn't applied). The `aspect-ratio` will apply to non-replaced elements that don't have a dimension explicitly set, as non-replaced elements are either [intrinsically](/en-US/docs/Glossary/Intrinsic_Size) or [extrinsically](/en-US/docs/Glossary/Extrinsic_size) sized, getting their size from their content, container, [box model](/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model) properties, etc. When an element is rendered to the page, if no CSS is applied and no HTML sizing attributes are included, the user agent will render the object at its natural size. diff --git a/files/en-us/web/css/fit-content/index.md b/files/en-us/web/css/fit-content/index.md index 25ac81af456adc8..e5a35c420c98750 100644 --- a/files/en-us/web/css/fit-content/index.md +++ b/files/en-us/web/css/fit-content/index.md @@ -6,29 +6,41 @@ browser-compat: css.properties.width.fit-content sidebar: cssref --- -The **`fit-content`** keyword is equivalent to {{cssxref("fit-content_function", "fit-content(stretch)")}}. In practice, this means that the box will use the available space, but never more than {{cssxref("max-content")}}. - -The `fit-content` size is calculated using the following equation, where `` is the size of its parent or grid track in [grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout): - -`min(max-content, max(min-content, ))` - -When used as laid out box size for {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} and {{cssxref("max-height")}} the maximum and minimum sizes refer to the content size. - -The {{cssxref("interpolate-size")}} property and {{cssxref("calc-size()")}} function can be used to enable animations to and from `fit-content`. +The `fit-content` sizing keyword represents an element size that adapts to its content while staying within the limits of its container. +The keyword ensures that the element is never smaller than its minimum intrinsic size ({{cssxref("min-content")}}) or larger than its maximum intrinsic size ({{cssxref("max-content")}}). > [!NOTE] -> The CSS Sizing specification also defines the {{cssxref("fit-content_function", "fit-content()")}} function. This page details the keyword. +> This keyword is different from the {{cssxref("fit-content_function", "fit-content()")}} function. The function is used for grid track sizing (for example in {{cssxref("grid-template-columns")}} and {{cssxref("grid-auto-rows")}}) and for laid-out box sizing for properties such as {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, and {{cssxref("max-height")}}. ## Syntax ```css +/* Used in sizing properties */ width: fit-content; +height: fit-content; +inline-size: fit-content; block-size: fit-content; ``` +## Description + +This keyword is used with sizing properties such as {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("block-size")}}, {{cssxref("inline-size")}}, {{cssxref("min-width")}}, and {{cssxref("max-width")}}. When used on these properties, the calculated size refers to the element's [content box](/en-US/docs/Web/CSS/box-edge#content-box). + +When `fit-content` is set, the element grows or shrinks to fit its content, but stops expanding after the relevant dimension reaches the size limit of its container. + +The `fit-content` size is calculated using the following formula: + +```plain +min(max-content, max(min-content, stretch)) +``` + +where, [`stretch`](/en-US/docs/Web/CSS/width#stretch) matches the element's [margin box](/en-US/docs/Web/CSS/box-edge#margin-box) to the width of its [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block). The keyword is essentially equivalent to `fit-content(stretch)`. + +You can enable animations to and from `fit-content` using the {{cssxref("interpolate-size")}} property and the {{cssxref("calc-size()")}} function. + ## Examples -### Using fit-content for box sizing +### Sizing boxes with fit-content #### HTML diff --git a/files/en-us/web/css/max-content/index.md b/files/en-us/web/css/max-content/index.md index 054a7b24c6ef563..22304acb04fb880 100644 --- a/files/en-us/web/css/max-content/index.md +++ b/files/en-us/web/css/max-content/index.md @@ -6,26 +6,28 @@ browser-compat: css.properties.width.max-content sidebar: cssref --- -The `max-content` sizing keyword represents the maximum {{glossary("intrinsic size")}} of the content. For text content this means that the content will not wrap at all even if it causes overflows. +The `max-content` sizing keyword represents the [maximum intrinsic size](/en-US/docs/Glossary/Intrinsic_Size#maximum_intrinsic_size) of an element. +The keyword expands the element to the largest size needed to display its content without any soft wraps. +For text content, this keyword does not wrap the content at all, even if it causes overflow. The {{cssxref("interpolate-size")}} property and {{cssxref("calc-size()")}} function can be used to enable animations to and from `max-content`. ## Syntax ```css -/* Used as a length */ +/* Used as a length value */ width: max-content; inline-size: max-content; height: max-content; block-size: max-content; -/* used in grid tracks */ +/* Used in grid tracks */ grid-template-columns: 200px 1fr max-content; ``` ## Examples -### Using max-content for box sizing +### Sizing boxes with max-content #### HTML diff --git a/files/en-us/web/css/min-content/index.md b/files/en-us/web/css/min-content/index.md index 3f868e3d67ae22e..26930930b0b6707 100644 --- a/files/en-us/web/css/min-content/index.md +++ b/files/en-us/web/css/min-content/index.md @@ -6,26 +6,28 @@ browser-compat: css.properties.width.min-content sidebar: cssref --- -The `min-content` sizing keyword represents the minimum {{glossary("intrinsic size")}} of the content. For text content this means that the content will take all soft-wrapping opportunities, becoming as small as the longest word. +The `min-content` sizing keyword represents the [minimum intrinsic size](/en-US/docs/Glossary/Intrinsic_Size#minimum_intrinsic_size) of an element. +The keyword shrinks the element to the smallest possible size without causing avoidable overflow of its content. +For text content, this keyword causes the content to wrap at every opportunity (such as spaces between words), and the element will be only as wide as the longest word. The {{cssxref("interpolate-size")}} property and {{cssxref("calc-size()")}} function can be used to enable animations to and from `min-content`. ## Syntax ```css -/* Used as a length */ +/* Used as a length value */ width: min-content; inline-size: min-content; height: min-content; block-size: min-content; -/* used in grid tracks */ +/* Used in grid tracks */ grid-template-columns: 200px 1fr min-content; ``` ## Examples -### Using min-content for box sizing +### Sizing boxes with min-content #### HTML