improve sizing keyword pages

files/en-us/glossary/extrinsic_size/index.md

@@ -0,0 +1,16 @@
+---
+title: Extrinsic size
+slug: Glossary/Extrinsic_size
+page-type: glossary-definition
+---
+
+{{GlossarySidebar}}
+
+In CSS, the **extrinsic size** 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.
+
+## See also
+
+- CSS {{cssxref("min-content")}}, {{cssxref("max-content")}}, and {{cssxref("fit-content")}} sizing keywords
+- Related glossary term: {{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

files/en-us/glossary/intrinsic_size/index.md

@@ -7,17 +7,17 @@ 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.
 
-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: [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).
 
 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 `<span>` would have if its container's inline size were infinite.
 
 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.
 
@@ -34,9 +34,9 @@ p {
 
 {{ 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
 <p>Element grows as text doesn't wrap.</p>
@@ -56,15 +56,12 @@ 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.
-
 ## See also
 
-- CSS {{cssxref("min-content")}}, {{cssxref("max-content")}}, and {{cssxref("fit-content")}} property values.
+- CSS {{cssxref("min-content")}}, {{cssxref("max-content")}}, and {{cssxref("fit-content")}} sizing keywords
 - {{cssxref("interpolate-size")}}
 - {{cssxref("aspect-ratio")}}
 - {{cssxref("calc-size()")}}
+- Related glossary term: {{glossary("Extrinsic 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/#intrinsic-sizes) specification

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.
 

files/en-us/web/css/fit-content/index.md

@@ -6,29 +6,42 @@ 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 `<available-space>` 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, <available-space>))`
-
-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 `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")}}).
 
 The {{cssxref("interpolate-size")}} property and {{cssxref("calc-size()")}} function can be used to enable animations to and from `fit-content`.
 
 > [!NOTE]
-> The CSS Sizing specification also defines the {{cssxref("fit-content_function", "fit-content()")}} function. This page details the keyword.
+> In addition to the `fit-content` keyword, the CSS Box Sizing specification also defines the {{cssxref("fit-content_function", "fit-content()")}} function, which takes a length or percentage as an argument and behaves slightly differently.
 
 ## Syntax
 
 ```css
+/* Used as a length value */
 width: fit-content;
+height: fit-content;
+inline-size: fit-content;
 block-size: fit-content;
+
+/* Used in grid tracks */
+grid-template-columns: 200px 1fr fit-content;
+```
+
+## Description
+
+An element with `fit-content` grows or shrinks to fit its content, but stops expanding after it reaches the size limit of its container.
+
+The `fit-content` size is calculated using the following formula, where `<available-space>` is either the size of the element's parent container or the size of the grid track in [grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout):
+
+```plain
+min(max-content, max(min-content, <available-space>))
 ```
 
+When applied to sizing properties such as {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, and {{cssxref("max-height")}}, the calculated size refers to the content box of the element.
+
 ## Examples
 
-### Using fit-content for box sizing
+### Sizing boxes with fit-content
 
 #### HTML
 

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
 

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