From 426fd0e911edd5f2c021ddf22416bf5a9854751e Mon Sep 17 00:00:00 2001 From: estelle Date: Fri, 19 Apr 2024 18:23:41 -0700 Subject: [PATCH 01/26] CSS module: box sizing --- files/en-us/web/css/css_box_model/index.md | 151 ++++++++++++++------- 1 file changed, 100 insertions(+), 51 deletions(-) diff --git a/files/en-us/web/css/css_box_model/index.md b/files/en-us/web/css/css_box_model/index.md index 63ecb05651a5d5d..eb97e8c19d726ac 100644 --- a/files/en-us/web/css/css_box_model/index.md +++ b/files/en-us/web/css/css_box_model/index.md @@ -1,78 +1,127 @@ --- -title: CSS box model +title: CSS box sizing slug: Web/CSS/CSS_box_model page-type: css-module -spec-urls: https://drafts.csswg.org/css-box/ +spec-urls: + - https://drafts.csswg.org/css-box-4/ + - https://drafts.csswg.org/css-box-3/ --- {{CSSRef}} -The **CSS box model** module defines the rectangular boxes, including their padding and margin, that are generated for elements and laid out according to the [visual formatting model](/en-US/docs/Web/CSS/Visual_formatting_model). +The **CSS box sizing** module defines the height, width, margin and padding properties, which, along with [border properties](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders), make up the CSS [box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model). The size of the content areas are defined by various properties, including the sizing properties defined here. -## Box model overview +Every visible element on a webpage is a box laid out according to the [visual formatting model](/en-US/docs/Web/CSS/Visual_formatting_model). CSS properties define the size, position, and stacking level of each box, with the box sizing properties defining the space in and around each one. -A box in CSS consists of a content area, which is where any text, images, or other HTML elements are displayed. This is optionally surrounded by padding, a border, and a margin, on one or more sides. The box model describes how these elements work together to create a box as displayed by CSS. To learn more about it read [Introduction to the CSS box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model). - -### Box-edge keywords +Each box has a rectangular content area, with the padding being around the content, the border is around the padding, and the margin sits outside the border. -The Box Model specification defines a set of keywords that refer to the edges of each part of the box, these are used as keyword values in CSS including as a value for the {{cssxref("box-sizing")}} property, to control how the box model calculates its size. +A box in CSS consists of a content area, which is where any text, images, or other HTML elements are displayed. This is optionally surrounded by padding, a border, and a margin, on one or more sides. The box model describes how these elements work together to create a box as displayed by CSS. To learn more about it read [Introduction to the CSS box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model). -- `content-box` - - : The edge of the content area of the box. -- `padding-box` - - : The edge of the padding of the box, if there is no padding on a side then this is the same as `content-box`. -- `border-box` - - : The edge of the border of the box, if there is no border on a side then this is the same as `padding-box`. -- `margin-box` - - : The edge of the margin of the box, if there is no margin on a side then this is the same as `border-box`. -- `stroke-box` - - : In SVG refers to the stroke bounding box, in CSS treated as `content-box`. -- `view-box` - - : In SVG refers to the nearest SVG viewport element's origin box, which is a rectangle with the width and height of the initial SVG user coordinate system established by the {{svgattr("viewBox")}} attribute for that element. In CSS treated as `border-box`. +The CSS box sizing module defines the physical, or "page relative", padding and margin properties. Flow-relative properties, which relate to text direction, are defined in [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values). ## Reference -> **Note:** This specification defines the physical padding and margin properties. Flow-relative properties, which relate to text direction, are defined in [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values). - -### Properties for controlling the margin of a box - -Margins surround the border edge of a box, and provide spacing between boxes. - -- {{CSSxRef("margin")}} -- {{CSSxRef("margin-bottom")}} -- {{CSSxRef("margin-left")}} -- {{CSSxRef("margin-right")}} -- {{CSSxRef("margin-top")}} -- {{CSSxRef("margin-trim")}} - -### Properties for controlling the padding for a box - -Padding is inserted between the content edge and border edge of a box. - -- {{CSSxRef("padding")}} -- {{CSSxRef("padding-bottom")}} -- {{CSSxRef("padding-left")}} -- {{CSSxRef("padding-right")}} -- {{CSSxRef("padding-top")}} - -### Other properties - -There are other properties that relate to the box model, that are defined elsewhere. - -- [Borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) - - : The border properties specify the thickness of the border, drawing style and color. -- [Overflow](/en-US/docs/Web/CSS/overflow) - - : Controls what happens when there is too much content to fit into a box. +### Properties + +- {{cssxref("box-sizing")}} +- {{cssxref("height")}} +- {{cssxref("margin")}} +- {{cssxref("margin-bottom")}} +- {{cssxref("margin-left")}} +- {{cssxref("margin-right")}} +- {{cssxref("margin-top")}} +- {{cssxref("margin-trim")}} +- {{cssxref("max-height")}} +- {{cssxref("max-width")}} +- {{cssxref("min-height")}} +- {{cssxref("min-width")}} +- {{cssxref("padding")}} +- {{cssxref("padding-bottom")}} +- {{cssxref("padding-left")}} +- {{cssxref("padding-right")}} +- {{cssxref("padding-top")}} +- {{cssxref("width")}} + +### Data types + +- [``](/en-US/docs/Web/CSS/box-edge) + - [``](/en-US/docs/Web/CSS/box-edge#visual_box) + - [``](/en-US/docs/Web/CSS/box-edge#layout_box) + - [``](/en-US/docs/Web/CSS/box-edge#paing_box) + - [``](<(/en-US/docs/Web/CSS/box-edge#coord_box)>) ## Guides - [Introduction to the CSS box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) + - : Explains one of the fundamental concept of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas. + - [Mastering margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) + - : Sometimes, two adjacent margins are collapsed into one. This article describes the rules that govern when and why this happens, and how to control it. + - [Visual formatting model](/en-US/docs/Web/CSS/Visual_formatting_model) + - : Explains the visual formatting model. +## Related concepts + +- [CSS backgrounds and borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) module + - {{cssxref("border-width")}} shorthand + - {{cssxref("border-bottom-width")}} + - {{cssxref("border-left-width")}} + - {{cssxref("border-right-width")}} + - {{cssxref("border-top-width")}} +- [CSS logical properties](/en-US/docs/Web/CSS/CSS_logical_properties_and_values) module + - {{CSSxRef("block-size")}} + - {{CSSxRef("inline-size")}} + - {{CSSxRef("max-block-size")}} + - {{CSSxRef("max-inline-size")}} + - {{CSSxRef("min-block-size")}} + - {{CSSxRef("min-inline-size")}} + - {{CSSxRef("margin-block")}} + - {{CSSxRef("margin-block-end")}} + - {{CSSxRef("margin-block-start")}} + - {{CSSxRef("margin-inline")}} + - {{CSSxRef("margin-inline-end")}} + - {{CSSxRef("margin-inline-start")}} + - {{CSSxRef("padding-block")}} + - {{CSSxRef("padding-block-end")}} + - {{CSSxRef("padding-block-start")}} + - {{CSSxRef("padding-inline")}} + - {{CSSxRef("padding-inline-end")}} + - {{CSSxRef("padding-inline-start")}} + - {{CSSxRef("border-block")}} + - {{CSSxRef("border-block-end")}} + - {{CSSxRef("border-block-end-width")}} + - {{CSSxRef("border-block-start")}} + - {{CSSxRef("border-block-start-width")}} + - {{CSSxRef("border-block-style")}} + - {{CSSxRef("border-block-width")}} + - {{CSSxRef("border-inline")}} + - {{CSSxRef("border-inline-end")}} + - {{CSSxRef("border-inline-end-width")}} + - {{CSSxRef("border-inline-start")}} + - {{CSSxRef("border-inline-start-width")}} + - {{CSSxRef("border-inline-width")}} +- [CSS overflow](/en-US/docs/Web/CSS/CSS_overflow) module + - {{CSSxRef("overflow")}} shorthand + - {{CSSxRef("overflow-block")}} + - {{CSSxRef("overflow-clip-margin")}} + - {{CSSxRef("overflow-inline")}} + - {{CSSxRef("overflow-x")}} + - {{CSSxRef("overflow-y")}} + - {{CSSxRef("text-overflow")}} + ## Specifications {{Specifications}} + +## See also + +- [CSS display](/en-US/docs/Web/CSS/CSS_display) module +- [CSS flex layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module +- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module +- [CSS positioned layout](/en-US/docs/Web/CSS/CSS_positioned_layout) module +- [CSS table](/en-US/docs/Web/CSS/CSS) module +- [CSS fragmentation](/en-US/docs/Web/CSS/CSS_fragmentation) module From 51cbf0373f7a4edb78ade2a8675a487725078716 Mon Sep 17 00:00:00 2001 From: estelle Date: Fri, 19 Apr 2024 18:30:22 -0700 Subject: [PATCH 02/26] remove link to table module --- files/en-us/web/css/css_box_model/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/files/en-us/web/css/css_box_model/index.md b/files/en-us/web/css/css_box_model/index.md index eb97e8c19d726ac..9f1108192c962c0 100644 --- a/files/en-us/web/css/css_box_model/index.md +++ b/files/en-us/web/css/css_box_model/index.md @@ -123,5 +123,4 @@ The CSS box sizing module defines the physical, or "page relative", padding and - [CSS flex layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module - [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module - [CSS positioned layout](/en-US/docs/Web/CSS/CSS_positioned_layout) module -- [CSS table](/en-US/docs/Web/CSS/CSS) module - [CSS fragmentation](/en-US/docs/Web/CSS/CSS_fragmentation) module From bc85184fc08893d9f250acc03c8e79334e38cda3 Mon Sep 17 00:00:00 2001 From: estelle Date: Sat, 20 Apr 2024 00:52:41 -0700 Subject: [PATCH 03/26] New module: box sizing --- files/en-us/web/css/css_box_model/index.md | 20 ++- files/en-us/web/css/css_box_sizing/index.md | 140 ++++++++++++++++++++ 2 files changed, 156 insertions(+), 4 deletions(-) create mode 100644 files/en-us/web/css/css_box_sizing/index.md diff --git a/files/en-us/web/css/css_box_model/index.md b/files/en-us/web/css/css_box_model/index.md index 9f1108192c962c0..579dabee08b92c1 100644 --- a/files/en-us/web/css/css_box_model/index.md +++ b/files/en-us/web/css/css_box_model/index.md @@ -1,5 +1,5 @@ --- -title: CSS box sizing +title: CSS box model slug: Web/CSS/CSS_box_model page-type: css-module spec-urls: @@ -9,15 +9,15 @@ spec-urls: {{CSSRef}} -The **CSS box sizing** module defines the height, width, margin and padding properties, which, along with [border properties](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders), make up the CSS [box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model). The size of the content areas are defined by various properties, including the sizing properties defined here. +The **CSS box model** module defines the height, width, margin and padding properties, which, along with [border properties](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders), make up the CSS [box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model). The size of the content areas are defined by various properties, including the box model properties defined here. -Every visible element on a webpage is a box laid out according to the [visual formatting model](/en-US/docs/Web/CSS/Visual_formatting_model). CSS properties define the size, position, and stacking level of each box, with the box sizing properties defining the space in and around each one. +Every visible element on a webpage is a box laid out according to the [visual formatting model](/en-US/docs/Web/CSS/Visual_formatting_model). CSS properties define the size, position, and stacking level of each box, with the box model properties defining the space in and around each one. Each box has a rectangular content area, with the padding being around the content, the border is around the padding, and the margin sits outside the border. A box in CSS consists of a content area, which is where any text, images, or other HTML elements are displayed. This is optionally surrounded by padding, a border, and a margin, on one or more sides. The box model describes how these elements work together to create a box as displayed by CSS. To learn more about it read [Introduction to the CSS box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model). -The CSS box sizing module defines the physical, or "page relative", padding and margin properties. Flow-relative properties, which relate to text direction, are defined in [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values). +The CSS box model module defines the physical, or "page relative", padding and margin properties. Flow-relative properties, which relate to text direction, are defined in [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values). ## Reference @@ -104,6 +104,18 @@ The CSS box sizing module defines the physical, or "page relative", padding and - {{CSSxRef("border-inline-start")}} - {{CSSxRef("border-inline-start-width")}} - {{CSSxRef("border-inline-width")}} +- [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module + - {{cssxref("aspect-ratio")}} + - {{cssxref("contain-intrinsic-block-size")}} + - {{cssxref("contain-intrinsic-height")}} + - {{cssxref("contain-intrinsic-inline-size")}} + - {{cssxref("contain-intrinsic-size")}} + - {{cssxref("contain-intrinsic-width")}} + - {{cssxref("max-height")}} + - {{cssxref("max-width")}} + - {{cssxref("min-height")}} + - {{cssxref("min-intrinsic-sizing")}} + - {{cssxref("min-width")}} - [CSS overflow](/en-US/docs/Web/CSS/CSS_overflow) module - {{CSSxRef("overflow")}} shorthand - {{CSSxRef("overflow-block")}} diff --git a/files/en-us/web/css/css_box_sizing/index.md b/files/en-us/web/css/css_box_sizing/index.md new file mode 100644 index 000000000000000..0db83550f4e567c --- /dev/null +++ b/files/en-us/web/css/css_box_sizing/index.md @@ -0,0 +1,140 @@ +--- +title: CSS box sizing +slug: Web/CSS/CSS_box_sizing +page-type: css-module +spec-urls: + - https://drafts.csswg.org/css-sizing-4/ + - https://drafts.csswg.org/css-sizing-3/ +--- + +{{CSSRef}} + +The **CSS box sizing** module extends the sizing box model properties with keywords that represent content-based "intrinsic" sizes and context-based "extrinsic" sizes, allowing CSS to more easily describe boxes that fit their content or fit into a particular layout context. + +An element's height, width, along with [margin, padding](/en-US/docs/Web/CSS/CSS_box_model), and [border](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) properties, make up the CSS [box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model). The size of the content areas are defined by various properties, including the sizing properties defined here. + +Every visible element on a webpage is a box laid out according to the [visual formatting model](/en-US/docs/Web/CSS/Visual_formatting_model). CSS properties define the size, position, and stacking level of each box, with the page relative box sizing properties defined here, or the [logical sizing property](/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Sizing) equivalents, define the intrinsic or extrinsic size. + +Each box has a rectangular content area, with the padding being around the content, the border is around the padding, and the margin sits outside the border. + +A box in CSS consists of a content area, which is where any text, images, or other HTML elements are displayed. This is optionally surrounded by padding, a border, and a margin, on one or more sides. The box model describes how these elements work together to create a box as displayed by CSS. To learn more about it read [Introduction to the CSS box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model). + +The CSS box sizing module defines the physical, or "page relative", padding and margin properties. Flow-relative properties, which relate to text direction, are defined in [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values). + +## Reference + +### Properties + +- {{cssxref("aspect-ratio")}} +- {{cssxref("box-sizing")}} +- {{cssxref("contain-intrinsic-block-size")}} +- {{cssxref("contain-intrinsic-height")}} +- {{cssxref("contain-intrinsic-inline-size")}} +- {{cssxref("contain-intrinsic-size")}} +- {{cssxref("contain-intrinsic-width")}} +- {{cssxref("height")}} +- {{cssxref("max-height")}} +- {{cssxref("max-width")}} +- {{cssxref("min-height")}} +- {{cssxref("min-intrinsic-sizing")}} +- {{cssxref("min-width")}} +- {{cssxref("width")}} + +### Data types and values + +- {{cssxref("ratio")}} data type +- {{cssxref("min-content")}} value +- {{cssxref("max-content")}} value +- {{cssxref("fit-content")}} value + + +### Functions + +- [`fit-content()`](/en-US/docs/Web/CSS/fit-content_function) + +### Glossary terms + +- {{glossary("instrinsic size")}} + +## Guides + +- [Introduction to the CSS box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) + + - : Explains one of the fundamental concept of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas. + +- [Mastering margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) + + - : Sometimes, two adjacent margins are collapsed into one. This article describes the rules that govern when and why this happens, and how to control it. + +- [Visual formatting model](/en-US/docs/Web/CSS/Visual_formatting_model) + + - : Explains the visual formatting model. + +## Related concepts + +- [CSS box model](/en-US/docs/Web/CSS/CSS_box_model) module + - {{cssxref("margin")}} shorthand + - {{cssxref("margin-bottom")}} + - {{cssxref("margin-left")}} + - {{cssxref("margin-right")}} + - {{cssxref("margin-top")}} + - {{cssxref("margin-trim")}} + - {{cssxref("padding")}} shorthand + - {{cssxref("padding-bottom")}} + - {{cssxref("padding-left")}} + - {{cssxref("padding-right")}} + - {{cssxref("padding-top")}} +- [CSS backgrounds and borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) module + - {{cssxref("border")}} shorthand + - {{cssxref("border-width")}} shorthand + - {{cssxref("border-bottom-width")}} + - {{cssxref("border-left-width")}} + - {{cssxref("border-right-width")}} + - {{cssxref("border-top-width")}} +- [CSS logical properties](/en-US/docs/Web/CSS/CSS_logical_properties_and_values) module + - {{CSSxRef("min-inline-size")}} + - {{CSSxRef("block-size")}} + - {{CSSxRef("inline-size")}} + - {{CSSxRef("max-block-size")}} + - {{CSSxRef("max-inline-size")}} + - {{CSSxRef("min-block-size")}} + - {{CSSxRef("min-inline-size")}} + - {{CSSxRef("margin-block")}} + - {{CSSxRef("margin-inline")}} + - {{CSSxRef("padding-block")}} + - {{CSSxRef("padding-inline")}} + - {{CSSxRef("border-block")}} + - {{CSSxRef("border-inline")}} + - {{CSSxRef("contain-intrinsic-block-size")}} + - {{CSSxRef("contain-intrinsic-inline-size")}} + - {{CSSxRef("overflow-block")}} + - {{CSSxRef("overflow-inline")}} + - {{CSSxRef("overscroll-behavior-block")}} + - {{CSSxRef("overscroll-behavior-inline")}} +- [CSS overflow](/en-US/docs/Web/CSS/CSS_overflow) module + - {{CSSxRef("overflow")}} shorthand + - {{CSSxRef("overflow-block")}} + - {{CSSxRef("overflow-clip-margin")}} + - {{CSSxRef("overflow-inline")}} + - {{CSSxRef("overflow-x")}} + - {{CSSxRef("overflow-y")}} + - {{CSSxRef("text-overflow")}} + +## Specifications + +{{Specifications}} + +## See also + +- [CSS display](/en-US/docs/Web/CSS/CSS_display) module +- [CSS flex layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module +- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module +- [CSS positioned layout](/en-US/docs/Web/CSS/CSS_positioned_layout) module +- [CSS table](/en-US/docs/Web/CSS/CSS) module +- [CSS fragmentation](/en-US/docs/Web/CSS/CSS_fragmentation) module From 520756d490ab94dedab778251acad5fd7c86a571 Mon Sep 17 00:00:00 2001 From: estelle Date: Sat, 20 Apr 2024 17:45:02 -0700 Subject: [PATCH 04/26] links in intrinsic size glossary term --- files/en-us/glossary/intrinsic_size/index.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/files/en-us/glossary/intrinsic_size/index.md b/files/en-us/glossary/intrinsic_size/index.md index de8781db253c5e4..a0937a3c8bccf65 100644 --- a/files/en-us/glossary/intrinsic_size/index.md +++ b/files/en-us/glossary/intrinsic_size/index.md @@ -8,10 +8,16 @@ page-type: glossary-definition In CSS, the _intrinsic size_ of an element is the size it would be based on its content, if no external factors were applied to it. For example, inline elements are sized intrinsically: `width`, `height`, and vertical margin and padding have no impact, though horizontal margin and padding do. -How intrinsic sizes are calculated is defined in the [CSS Intrinsic and Extrinsic Sizing Specification](https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes). +How intrinsic sizes are calculated is defined in the [CSS sizing module](/en-US/docs/Web/CSS/CSS_box_sizing). Intrinsic sizing takes into account the `min-content` and `max-content` size of an element. For text the `min-content` size would be if the text wrapped as small as it can in the inline direction without causing an overflow, doing as much soft-wrapping as possible. For a box containing a string of text, the `min-content` size would be defined by the longest word. The keyword value of `min-content` for the {{cssxref("width")}} property will size an element according to the `min-content` size. The `max-content` size is the opposite — in the case of text, this would have the text display as wide as possible, doing no soft-wrapping, even if an overflow was caused. The keyword value `max-content` exposes this behavior. -For images the intrinsic size has the same meaning — it is the size that an image would be displayed if no CSS was applied to change the rendering. By default images are assumed to have a "1x" pixel density (1 device pixel = 1 CSS pixel) and so the intrinsic size is simply the pixel height and width. The intrinsic image size and resolution can be explicitly specified in the {{Glossary("EXIF")}} data. The intrinsic pixel density may also be set for images using the [`srcset`](/en-US/docs/Web/HTML/Element/img#srcset) attribute (note that if both mechanisms are used, the `srcset` value is applied "over" the EXIF value). +For images the intrinsic size has the same meaning — it is the size that an image would be displayed if no CSS was applied to change the rendering. By default, images are assumed to have a "1x" pixel density (1 device pixel = 1 CSS pixel) and so the intrinsic size is simply the pixel height and width. The intrinsic image size and resolution can be explicitly specified in the {{Glossary("EXIF")}} data. The intrinsic pixel density may also be set for images using the [`srcset`](/en-US/docs/Web/HTML/Element/img#srcset) attribute (note that if both mechanisms are used, the `srcset` value is applied "over" the EXIF value). + +## See also + +- CSS {{cssxref("min-content")}}, {{cssxref("max-content")}}, and {{cssxref("fit-content")}} property values. +- CSS {{"aspect-ratio"}} property +- [CSS sizing specification: intrinsic sizes](https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes) From b37d5cf59239bd78315a94b617b0be8c6ee21561 Mon Sep 17 00:00:00 2001 From: estelle Date: Sat, 20 Apr 2024 17:48:37 -0700 Subject: [PATCH 05/26] logical directions --- files/en-us/glossary/intrinsic_size/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/glossary/intrinsic_size/index.md b/files/en-us/glossary/intrinsic_size/index.md index a0937a3c8bccf65..ad91590ac902694 100644 --- a/files/en-us/glossary/intrinsic_size/index.md +++ b/files/en-us/glossary/intrinsic_size/index.md @@ -6,11 +6,11 @@ page-type: glossary-definition {{GlossarySidebar}} -In CSS, the _intrinsic size_ of an element is the size it would be based on its content, if no external factors were applied to it. For example, inline elements are sized intrinsically: `width`, `height`, and vertical margin and padding have no impact, though horizontal margin and padding do. +In CSS, the _intrinsic size_ of an element is the size it would be based on its content if no external factors were applied to it. For example, inline elements are sized intrinsically: `width`, `height`, and margin and padding in the block direction have no impact, though inline direction margin and padding do. How intrinsic sizes are calculated is defined in the [CSS sizing module](/en-US/docs/Web/CSS/CSS_box_sizing). -Intrinsic sizing takes into account the `min-content` and `max-content` size of an element. For text the `min-content` size would be if the text wrapped as small as it can in the inline direction without causing an overflow, doing as much soft-wrapping as possible. For a box containing a string of text, the `min-content` size would be defined by the longest word. The keyword value of `min-content` for the {{cssxref("width")}} property will size an element according to the `min-content` size. +Intrinsic sizing takes into account the `min-content` and `max-content` size of an element. For text the `min-content` size would be if the text wrapped as small as it can in the inline direction without causing an overflow, doing as much soft-wrapping as possible. For a box containing a string of text, the `min-content` size would be defined by the longest word. The keyword value of `min-content` for the {{cssxref("width")}} and {{cssxref("inline-size")}} properties will size an element according to the `min-content` size. The `max-content` size is the opposite — in the case of text, this would have the text display as wide as possible, doing no soft-wrapping, even if an overflow was caused. The keyword value `max-content` exposes this behavior. From eb457055616070a05c7f8fc5763e94aa38889b68 Mon Sep 17 00:00:00 2001 From: estelle Date: Sat, 20 Apr 2024 17:48:59 -0700 Subject: [PATCH 06/26] typo --- files/en-us/web/css/css_box_sizing/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 0db83550f4e567c..fa0058cd7d9352d 100644 --- a/files/en-us/web/css/css_box_sizing/index.md +++ b/files/en-us/web/css/css_box_sizing/index.md @@ -60,7 +60,7 @@ The CSS box sizing module defines the physical, or "page relative", padding and ### Glossary terms -- {{glossary("instrinsic size")}} +- {{glossary("intrinsic size")}} ## Guides From 5abaf68269b09ac745c6747d513fcde8a540bf1b Mon Sep 17 00:00:00 2001 From: estelle Date: Mon, 22 Apr 2024 13:27:42 -0700 Subject: [PATCH 07/26] update intrinsic. Add extrinsic to intrinsic --- files/en-us/glossary/intrinsic_size/index.md | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/files/en-us/glossary/intrinsic_size/index.md b/files/en-us/glossary/intrinsic_size/index.md index ad91590ac902694..1d5044237c7157f 100644 --- a/files/en-us/glossary/intrinsic_size/index.md +++ b/files/en-us/glossary/intrinsic_size/index.md @@ -6,18 +6,25 @@ page-type: glossary-definition {{GlossarySidebar}} -In CSS, the _intrinsic size_ of an element is the size it would be based on its content if no external factors were applied to it. For example, inline elements are sized intrinsically: `width`, `height`, and margin and padding in the block direction have no impact, though inline direction margin and padding do. +In CSS, the _intrinsic size_ of an element is the size it would be based on its content without regard to its context. The intrinsic size of an element is the size an element would be if no external factors, like CSS [box model](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) properties, were applied. An element's intrinsic sizes are the element's {{cssxref("min-content")}} and {{cssxref("max-content")}} sizes. -How intrinsic sizes are calculated is defined in the [CSS sizing module](/en-US/docs/Web/CSS/CSS_box_sizing). +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 ( though {{cssxref("margin-inline")}} and {{cssxref("padding-inline")}} do). -Intrinsic sizing takes into account the `min-content` and `max-content` size of an element. For text the `min-content` size would be if the text wrapped as small as it can in the inline direction without causing an overflow, doing as much soft-wrapping as possible. For a box containing a string of text, the `min-content` size would be defined by the longest word. The keyword value of `min-content` for the {{cssxref("width")}} and {{cssxref("inline-size")}} properties will size an element according to the `min-content` size. +For example, the minimum intrinsic, or {{cssxref("min-content")}} size of a {{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 a inline-size of `0px`. For text, the `min-content` size 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 `min-content` size would be defined by the longest word. The keyword value of `min-content` for the {{cssxref("width")}} and {{cssxref("inline-size")}} properties will size an element according to the `min-content` size. -The `max-content` size is the opposite — in the case of text, this would have the text display as wide as possible, doing no soft-wrapping, even if an overflow was caused. The keyword value `max-content` exposes this behavior. +The maximum intrinsic size, or {{cssxref("max-content")}} size is the opposite. It is the size the element would if the inline-size of the container were infinite. In the case of text, this would have the text display as wide as possible, doing no soft-wrapping, even if an overflow was caused. The keyword value `max-content` exposes this behavior. + +Intrinsic sizes and the way they are calculated are defined in the [CSS sizing module](/en-US/docs/Web/CSS/CSS_box_sizing). For images the intrinsic size has the same meaning — it is the size that an image would be displayed if no CSS was applied to change the rendering. By default, images are assumed to have a "1x" pixel density (1 device pixel = 1 CSS pixel) and so the intrinsic size is simply the pixel height and width. The intrinsic image size and resolution can be explicitly specified in the {{Glossary("EXIF")}} data. The intrinsic pixel density may also be set for images using the [`srcset`](/en-US/docs/Web/HTML/Element/img#srcset) attribute (note that if both mechanisms are used, the `srcset` value is applied "over" the EXIF value). +## Extrinsic sizing + +The opposite of _intrinsic size_ is **_extrinsic size_**. Extrinsic sizing determines sizes based on the context of an element, without regard for its contents. Extrinsic sizing is determined by box model properties 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 {{"aspect-ratio"}} property +- [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module - [CSS sizing specification: intrinsic sizes](https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes) From e8121fe72a1cf2c806439ad12dd1b1f03b9e96e5 Mon Sep 17 00:00:00 2001 From: estelle Date: Mon, 22 Apr 2024 13:28:33 -0700 Subject: [PATCH 08/26] links to module page --- files/en-us/web/css/fit-content/index.md | 3 ++- files/en-us/web/css/fit-content_function/index.md | 1 + files/en-us/web/css/max-content/index.md | 1 + files/en-us/web/css/min-content/index.md | 1 + 4 files changed, 5 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/css/fit-content/index.md b/files/en-us/web/css/fit-content/index.md index 4889789e7131ad0..4e3c6d2bfdcd126 100644 --- a/files/en-us/web/css/fit-content/index.md +++ b/files/en-us/web/css/fit-content/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.width.fit-content {{CSSRef}} -The **`fit-content`** behaves as `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`** behaves as `fit-content(stretch)`. In practice, this means that the box will use the available space, but never more than {{cssxref("max-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. @@ -69,3 +69,4 @@ block-size: fit-content; ## See also - Related sizing keywords: {{cssxref("min-content")}}, {{cssxref("max-content")}} +- [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module diff --git a/files/en-us/web/css/fit-content_function/index.md b/files/en-us/web/css/fit-content_function/index.md index 6ca1550c2989091..82901eeccb2c43d 100644 --- a/files/en-us/web/css/fit-content_function/index.md +++ b/files/en-us/web/css/fit-content_function/index.md @@ -96,6 +96,7 @@ fit-content(40%) ## See also - Related sizing keywords: {{cssxref("min-content")}}, {{cssxref("max-content")}} +- [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module - Related CSS Grid properties: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}} - Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement)_ - Grid Layout Guide: _[Grid template areas - Grid definition shorthands](/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas#grid_definition_shorthands)_ diff --git a/files/en-us/web/css/max-content/index.md b/files/en-us/web/css/max-content/index.md index bf32817e08db4ec..d24d534efbcd477 100644 --- a/files/en-us/web/css/max-content/index.md +++ b/files/en-us/web/css/max-content/index.md @@ -105,3 +105,4 @@ grid-template-columns: 200px 1fr max-content; ## See also - Related sizing keywords: {{cssxref("min-content")}}, {{cssxref("fit-content")}} +- [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module diff --git a/files/en-us/web/css/min-content/index.md b/files/en-us/web/css/min-content/index.md index 900956c4b5539dd..462cf571cc508f5 100644 --- a/files/en-us/web/css/min-content/index.md +++ b/files/en-us/web/css/min-content/index.md @@ -95,3 +95,4 @@ grid-template-columns: 200px 1fr min-content; ## See also - Related sizing keywords: {{cssxref("max-content")}}, {{cssxref("fit-content")}} +- [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module From 7319e8add99a40bbc590d289e3b58e2933865951 Mon Sep 17 00:00:00 2001 From: estelle Date: Mon, 22 Apr 2024 17:15:00 -0700 Subject: [PATCH 09/26] intro to box sizing module --- files/en-us/web/css/css_box_sizing/index.md | 75 +++++++++++---------- 1 file changed, 41 insertions(+), 34 deletions(-) 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 fa0058cd7d9352d..eb5c291946f89fe 100644 --- a/files/en-us/web/css/css_box_sizing/index.md +++ b/files/en-us/web/css/css_box_sizing/index.md @@ -9,17 +9,15 @@ spec-urls: {{CSSRef}} -The **CSS box sizing** module extends the sizing box model properties with keywords that represent content-based "intrinsic" sizes and context-based "extrinsic" sizes, allowing CSS to more easily describe boxes that fit their content or fit into a particular layout context. +The **CSS box sizing** module extends the sizing box model properties with keywords that represent content-based {{cssxref("intrinsic sizes")}} and context-based extrinsic sizes, allowing CSS to more easily describe boxes that fit their content or fit into a particular layout context. -An element's height, width, along with [margin, padding](/en-US/docs/Web/CSS/CSS_box_model), and [border](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) properties, make up the CSS [box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model). The size of the content areas are defined by various properties, including the sizing properties defined here. +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 (with border properties defined in [CSS backgrounds and borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) module). The box sizing module extends the box model module to enable an element to be sized intrinsically, enabling explicitly setting an element's size to be based on the size of an element's content. -Every visible element on a webpage is a box laid out according to the [visual formatting model](/en-US/docs/Web/CSS/Visual_formatting_model). CSS properties define the size, position, and stacking level of each box, with the page relative box sizing properties defined here, or the [logical sizing property](/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Sizing) equivalents, define the intrinsic or extrinsic size. +The sizing values introduced in this module allow elements with [size containment](/en-US/docs/Web/CSS/CSS_containment#size_containment) to specify explicit intrinsic sizes, enabling boxes to size as if its in-flow content totals to a width and height matching the specified explicit intrinsic size rather than sizing as if it were empty. -Each box has a rectangular content area, with the padding being around the content, the border is around the padding, and the margin sits outside the border. +This module also introduced the ability to define a ratio for an element's box meaning the browser can automatically adjust an element's dimensions to maintain a specified aspect ratio as long as one of the dimensions is automatically sized. -A box in CSS consists of a content area, which is where any text, images, or other HTML elements are displayed. This is optionally surrounded by padding, a border, and a margin, on one or more sides. The box model describes how these elements work together to create a box as displayed by CSS. To learn more about it read [Introduction to the CSS box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model). - -The CSS box sizing module defines the physical, or "page relative", padding and margin properties. Flow-relative properties, which relate to text direction, are defined in [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values). +The [logical properties and values module](/en-US/docs/Web/CSS/CSS_logical_properties_and_values) expanded the properties available in both these modules to include writing-mode relative equivalents of the corresponding physical box model and intrinsic box sizing properties. ## Reference @@ -36,23 +34,17 @@ The CSS box sizing module defines the physical, or "page relative", padding and - {{cssxref("max-height")}} - {{cssxref("max-width")}} - {{cssxref("min-height")}} -- {{cssxref("min-intrinsic-sizing")}} - {{cssxref("min-width")}} - {{cssxref("width")}} +> **Note:** The CSS box sizing module introduces the `min-intrinsic-sizing` property that has not yet been implemented. + ### Data types and values - {{cssxref("ratio")}} data type - {{cssxref("min-content")}} value - {{cssxref("max-content")}} value - {{cssxref("fit-content")}} value - ### Functions @@ -76,27 +68,12 @@ The CSS box sizing module defines the physical, or "page relative", padding and - : Explains the visual formatting model. +- [Controlling ratios of flex items along the main axis](/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) + + - : Explains intrinsic sizing as a precursor to understanding how to control the size and flexibility of flex items along the main axis using {{CSSxRef("flex-grow")}}, {{CSSxRef("flex-shrink")}}, and {{CSSxRef("flex-basis")}}. + ## Related concepts -- [CSS box model](/en-US/docs/Web/CSS/CSS_box_model) module - - {{cssxref("margin")}} shorthand - - {{cssxref("margin-bottom")}} - - {{cssxref("margin-left")}} - - {{cssxref("margin-right")}} - - {{cssxref("margin-top")}} - - {{cssxref("margin-trim")}} - - {{cssxref("padding")}} shorthand - - {{cssxref("padding-bottom")}} - - {{cssxref("padding-left")}} - - {{cssxref("padding-right")}} - - {{cssxref("padding-top")}} -- [CSS backgrounds and borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) module - - {{cssxref("border")}} shorthand - - {{cssxref("border-width")}} shorthand - - {{cssxref("border-bottom-width")}} - - {{cssxref("border-left-width")}} - - {{cssxref("border-right-width")}} - - {{cssxref("border-top-width")}} - [CSS logical properties](/en-US/docs/Web/CSS/CSS_logical_properties_and_values) module - {{CSSxRef("min-inline-size")}} - {{CSSxRef("block-size")}} @@ -117,6 +94,25 @@ The CSS box sizing module defines the physical, or "page relative", padding and - {{CSSxRef("overflow-inline")}} - {{CSSxRef("overscroll-behavior-block")}} - {{CSSxRef("overscroll-behavior-inline")}} +- [CSS box model](/en-US/docs/Web/CSS/CSS_box_model) module + - {{cssxref("margin")}} shorthand + - {{cssxref("margin-bottom")}} + - {{cssxref("margin-left")}} + - {{cssxref("margin-right")}} + - {{cssxref("margin-top")}} + - {{cssxref("margin-trim")}} + - {{cssxref("padding")}} shorthand + - {{cssxref("padding-bottom")}} + - {{cssxref("padding-left")}} + - {{cssxref("padding-right")}} + - {{cssxref("padding-top")}} +- [CSS backgrounds and borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) module + - {{cssxref("border")}} shorthand + - {{cssxref("border-width")}} shorthand + - {{cssxref("border-bottom-width")}} + - {{cssxref("border-left-width")}} + - {{cssxref("border-right-width")}} + - {{cssxref("border-top-width")}} - [CSS overflow](/en-US/docs/Web/CSS/CSS_overflow) module - {{CSSxRef("overflow")}} shorthand - {{CSSxRef("overflow-block")}} @@ -125,6 +121,17 @@ The CSS box sizing module defines the physical, or "page relative", padding and - {{CSSxRef("overflow-x")}} - {{CSSxRef("overflow-y")}} - {{CSSxRef("text-overflow")}} +- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid) module + - {{CSSxRef("grid")}} + - {{CSSxRef("grid-auto-columns")}} + - {{CSSxRef("grid-auto-rows")}} + - {{CSSxRef("grid-template-columns")}} + - {{CSSxRef("grid-template-rows")}} + - {{CSSxRef("repeat")}} + - {{CSSxRef("minmax")}} function +- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexbox) module + - {{CSSxRef("flex-basis")}} + - {{CSSxRef("flex")}} ## Specifications From 7df159932e45def1faae59f6f20655a1b74f6894 Mon Sep 17 00:00:00 2001 From: estelle Date: Mon, 22 Apr 2024 17:49:44 -0700 Subject: [PATCH 10/26] box model intro --- files/en-us/web/css/css_box_model/index.md | 10 ++++------ files/en-us/web/css/css_box_sizing/index.md | 2 +- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/files/en-us/web/css/css_box_model/index.md b/files/en-us/web/css/css_box_model/index.md index 579dabee08b92c1..456ae91a637cf2a 100644 --- a/files/en-us/web/css/css_box_model/index.md +++ b/files/en-us/web/css/css_box_model/index.md @@ -9,15 +9,13 @@ spec-urls: {{CSSRef}} -The **CSS box model** module defines the height, width, margin and padding properties, which, along with [border properties](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders), make up the CSS [box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model). The size of the content areas are defined by various properties, including the box model properties defined here. +The **CSS box model** module defines the height, width, margin and padding properties, which, along with [border properties](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders), make up the CSS [box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model). -Every visible element on a webpage is a box laid out according to the [visual formatting model](/en-US/docs/Web/CSS/Visual_formatting_model). CSS properties define the size, position, and stacking level of each box, with the box model properties defining the space in and around each one. +Every visible element on a webpage is a box laid out according to the [visual formatting model](/en-US/docs/Web/CSS/Visual_formatting_model). CSS properties define the size, position, and stacking level of each box, with the box model properties defining the space in and around each one. The size of a box can be defined by various properties, including the CSS box model properties defining an element's extrinsic size. -Each box has a rectangular content area, with the padding being around the content, the border is around the padding, and the margin sits outside the border. +Each box has a rectangular content area, which is where any text, images, or other HTML elements are displayed. The content may be surrounded by padding, a border, and a margin, on one or more sides. The padding is around the content, the border is around the padding, and the margin sits outside the border. The box model describes how these features — the content, padding, border, and margin — work together to create a box as displayed by CSS. -A box in CSS consists of a content area, which is where any text, images, or other HTML elements are displayed. This is optionally surrounded by padding, a border, and a margin, on one or more sides. The box model describes how these elements work together to create a box as displayed by CSS. To learn more about it read [Introduction to the CSS box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model). - -The CSS box model module defines the physical, or "page relative", padding and margin properties. Flow-relative properties, which relate to text direction, are defined in [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values). +The CSS box model module defines the physical, or "page relative", padding and margin properties. Flow-relative properties, which relate to text direction, are defined in [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values). The box model module is extended by the [CSS box sizing module](/en-US/docs/Web/CSS/CSS_box_sizing), which introduces {{cssxref("intrinsic size")}} value and enables defining aspect ratios for elements that are auto-sized in at least one dimension. ## Reference 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 eb5c291946f89fe..d70a1f3f495616a 100644 --- a/files/en-us/web/css/css_box_sizing/index.md +++ b/files/en-us/web/css/css_box_sizing/index.md @@ -9,7 +9,7 @@ spec-urls: {{CSSRef}} -The **CSS box sizing** module extends the sizing box model properties with keywords that represent content-based {{cssxref("intrinsic sizes")}} and context-based extrinsic sizes, allowing CSS to more easily describe boxes that fit their content or fit into a particular layout context. +The **CSS box sizing** module defines sizing, minimum sizing and maximum sizing properties, and extends the CSS sizing properties with keywords that represent content-based {{cssxref("intrinsic sizes")}} and context-based "extrinsic" sizes, enabling describing how elements fit their content or fit into a particular layout context. 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 (with border properties defined in [CSS backgrounds and borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) module). The box sizing module extends the box model module to enable an element to be sized intrinsically, enabling explicitly setting an element's size to be based on the size of an element's content. From 427f8b2b6891ff081b00b00beff896709d9c4c5a Mon Sep 17 00:00:00 2001 From: estelle Date: Mon, 22 Apr 2024 18:00:18 -0700 Subject: [PATCH 11/26] missing values --- files/en-us/web/css/css_box_sizing/index.md | 3 +++ files/en-us/web/css/fit-content/index.md | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) 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 d70a1f3f495616a..3e8979afa7a090f 100644 --- a/files/en-us/web/css/css_box_sizing/index.md +++ b/files/en-us/web/css/css_box_sizing/index.md @@ -45,6 +45,9 @@ The [logical properties and values module](/en-US/docs/Web/CSS/CSS_logical_prope - {{cssxref("min-content")}} value - {{cssxref("max-content")}} value - {{cssxref("fit-content")}} value +- {{cssxref("fit-content_function", "fit-content()")}} function + +> **Note:** The CSS box sizing module introduces the `stretch` and `contain` sizing values that have not yet been directly implemented. ### Functions diff --git a/files/en-us/web/css/fit-content/index.md b/files/en-us/web/css/fit-content/index.md index 4e3c6d2bfdcd126..d9a4d22a810db9e 100644 --- a/files/en-us/web/css/fit-content/index.md +++ b/files/en-us/web/css/fit-content/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.width.fit-content {{CSSRef}} -The **`fit-content`** behaves as `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`** behaves as {{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")}}. 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. From b47235f2938fe88a62023150b8e466b10d72d900 Mon Sep 17 00:00:00 2001 From: estelle Date: Mon, 22 Apr 2024 18:02:36 -0700 Subject: [PATCH 12/26] missing values --- files/en-us/web/css/css_box_sizing/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 3e8979afa7a090f..129f60928198349 100644 --- a/files/en-us/web/css/css_box_sizing/index.md +++ b/files/en-us/web/css/css_box_sizing/index.md @@ -47,7 +47,7 @@ The [logical properties and values module](/en-US/docs/Web/CSS/CSS_logical_prope - {{cssxref("fit-content")}} value - {{cssxref("fit-content_function", "fit-content()")}} function -> **Note:** The CSS box sizing module introduces the `stretch` and `contain` sizing values that have not yet been directly implemented. +> **Note:** The CSS box sizing module introduces the `stretch` and `contain` keywords as sizing values that have not yet been implemented on the box sizing properties. ### Functions From 9b06e08f66d161bc8354b68138f1f30bab0a4601 Mon Sep 17 00:00:00 2001 From: estelle Date: Mon, 22 Apr 2024 18:05:17 -0700 Subject: [PATCH 13/26] oops --- files/en-us/glossary/intrinsic_size/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/glossary/intrinsic_size/index.md b/files/en-us/glossary/intrinsic_size/index.md index 1d5044237c7157f..19186ce6527b87a 100644 --- a/files/en-us/glossary/intrinsic_size/index.md +++ b/files/en-us/glossary/intrinsic_size/index.md @@ -25,6 +25,6 @@ The opposite of _intrinsic size_ is **_extrinsic size_**. Extrinsic sizing deter ## See also - CSS {{cssxref("min-content")}}, {{cssxref("max-content")}}, and {{cssxref("fit-content")}} property values. -- CSS {{"aspect-ratio"}} property +- CSS {{cssxref("aspect-ratio")}} property - [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module - [CSS sizing specification: intrinsic sizes](https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes) From 805b2e063958a86ad6ed4686a855a7f60ad50319 Mon Sep 17 00:00:00 2001 From: estelle Date: Mon, 22 Apr 2024 18:10:20 -0700 Subject: [PATCH 14/26] fixed links --- files/en-us/web/css/css_box_model/index.md | 1 - files/en-us/web/css/css_box_sizing/index.md | 7 +++---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/css/css_box_model/index.md b/files/en-us/web/css/css_box_model/index.md index 456ae91a637cf2a..f66a937759e8853 100644 --- a/files/en-us/web/css/css_box_model/index.md +++ b/files/en-us/web/css/css_box_model/index.md @@ -112,7 +112,6 @@ The CSS box model module defines the physical, or "page relative", padding and m - {{cssxref("max-height")}} - {{cssxref("max-width")}} - {{cssxref("min-height")}} - - {{cssxref("min-intrinsic-sizing")}} - {{cssxref("min-width")}} - [CSS overflow](/en-US/docs/Web/CSS/CSS_overflow) module - {{CSSxRef("overflow")}} shorthand 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 129f60928198349..6ea4367353c8b65 100644 --- a/files/en-us/web/css/css_box_sizing/index.md +++ b/files/en-us/web/css/css_box_sizing/index.md @@ -9,7 +9,7 @@ spec-urls: {{CSSRef}} -The **CSS box sizing** module defines sizing, minimum sizing and maximum sizing properties, and extends the CSS sizing properties with keywords that represent content-based {{cssxref("intrinsic sizes")}} and context-based "extrinsic" sizes, enabling describing how elements fit their content or fit into a particular layout context. +The **CSS box sizing** module defines sizing, minimum sizing and maximum sizing properties, and extends the CSS sizing properties with keywords that represent content-based {{cssxref("intrinsic size")}} and context-based "extrinsic" size, enabling describing how elements fit their content or fit into a particular layout context. 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 (with border properties defined in [CSS backgrounds and borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) module). The box sizing module extends the box model module to enable an element to be sized intrinsically, enabling explicitly setting an element's size to be based on the size of an element's content. @@ -124,7 +124,7 @@ The [logical properties and values module](/en-US/docs/Web/CSS/CSS_logical_prope - {{CSSxRef("overflow-x")}} - {{CSSxRef("overflow-y")}} - {{CSSxRef("text-overflow")}} -- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid) module +- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module - {{CSSxRef("grid")}} - {{CSSxRef("grid-auto-columns")}} - {{CSSxRef("grid-auto-rows")}} @@ -132,7 +132,7 @@ The [logical properties and values module](/en-US/docs/Web/CSS/CSS_logical_prope - {{CSSxRef("grid-template-rows")}} - {{CSSxRef("repeat")}} - {{CSSxRef("minmax")}} function -- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexbox) module +- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module - {{CSSxRef("flex-basis")}} - {{CSSxRef("flex")}} @@ -146,5 +146,4 @@ The [logical properties and values module](/en-US/docs/Web/CSS/CSS_logical_prope - [CSS flex layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module - [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module - [CSS positioned layout](/en-US/docs/Web/CSS/CSS_positioned_layout) module -- [CSS table](/en-US/docs/Web/CSS/CSS) module - [CSS fragmentation](/en-US/docs/Web/CSS/CSS_fragmentation) module From 1c227c1a83a09e0b946d349d13b6e5c853f363f2 Mon Sep 17 00:00:00 2001 From: estelle Date: Mon, 22 Apr 2024 18:11:33 -0700 Subject: [PATCH 15/26] fixed links --- files/en-us/web/css/css_box_model/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_box_model/index.md b/files/en-us/web/css/css_box_model/index.md index f66a937759e8853..0ff757a0ac76f0a 100644 --- a/files/en-us/web/css/css_box_model/index.md +++ b/files/en-us/web/css/css_box_model/index.md @@ -15,7 +15,7 @@ Every visible element on a webpage is a box laid out according to the [visual fo Each box has a rectangular content area, which is where any text, images, or other HTML elements are displayed. The content may be surrounded by padding, a border, and a margin, on one or more sides. The padding is around the content, the border is around the padding, and the margin sits outside the border. The box model describes how these features — the content, padding, border, and margin — work together to create a box as displayed by CSS. -The CSS box model module defines the physical, or "page relative", padding and margin properties. Flow-relative properties, which relate to text direction, are defined in [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values). The box model module is extended by the [CSS box sizing module](/en-US/docs/Web/CSS/CSS_box_sizing), which introduces {{cssxref("intrinsic size")}} value and enables defining aspect ratios for elements that are auto-sized in at least one dimension. +The CSS box model module defines the physical, or "page relative", padding and margin properties. Flow-relative properties, which relate to text direction, are defined in [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values). The box model module is extended by the [CSS box sizing module](/en-US/docs/Web/CSS/CSS_box_sizing), which introduces {{glossary("intrinsic size")}} value and enables defining aspect ratios for elements that are auto-sized in at least one dimension. ## Reference From bc68520a0e425b7e76b6814f54ab02c5702d63c5 Mon Sep 17 00:00:00 2001 From: estelle Date: Mon, 22 Apr 2024 18:13:21 -0700 Subject: [PATCH 16/26] fixed links --- files/en-us/web/css/css_box_model/index.md | 2 +- files/en-us/web/css/css_box_sizing/index.md | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/css_box_model/index.md b/files/en-us/web/css/css_box_model/index.md index 0ff757a0ac76f0a..3f4bd65febfb36d 100644 --- a/files/en-us/web/css/css_box_model/index.md +++ b/files/en-us/web/css/css_box_model/index.md @@ -52,7 +52,7 @@ The CSS box model module defines the physical, or "page relative", padding and m - [Introduction to the CSS box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - - : Explains one of the fundamental concept of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas. + - : Explains one of the fundamental concepts of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas. - [Mastering margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) 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 6ea4367353c8b65..a0f88143548fc3e 100644 --- a/files/en-us/web/css/css_box_sizing/index.md +++ b/files/en-us/web/css/css_box_sizing/index.md @@ -9,7 +9,7 @@ spec-urls: {{CSSRef}} -The **CSS box sizing** module defines sizing, minimum sizing and maximum sizing properties, and extends the CSS sizing properties with keywords that represent content-based {{cssxref("intrinsic size")}} and context-based "extrinsic" size, enabling describing how elements fit their content or fit into a particular layout context. +The **CSS box sizing** module defines sizing, minimum sizing and maximum sizing properties, and extends the CSS sizing properties with keywords that represent content-based {{glossary("intrinsic size")}} and context-based "extrinsic" size, enabling describing how elements fit their content or fit into a particular layout context. 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 (with border properties defined in [CSS backgrounds and borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) module). The box sizing module extends the box model module to enable an element to be sized intrinsically, enabling explicitly setting an element's size to be based on the size of an element's content. @@ -61,7 +61,7 @@ The [logical properties and values module](/en-US/docs/Web/CSS/CSS_logical_prope - [Introduction to the CSS box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - - : Explains one of the fundamental concept of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas. + - : Explains one of the fundamental concepts of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas. - [Mastering margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) @@ -71,7 +71,7 @@ The [logical properties and values module](/en-US/docs/Web/CSS/CSS_logical_prope - : Explains the visual formatting model. -- [Controlling ratios of flex items along the main axis](/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) +- [Controlling ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) - : Explains intrinsic sizing as a precursor to understanding how to control the size and flexibility of flex items along the main axis using {{CSSxRef("flex-grow")}}, {{CSSxRef("flex-shrink")}}, and {{CSSxRef("flex-basis")}}. From ad8d5e0f6a7632c987b49e992320ed19fabb011b Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 24 Apr 2024 07:53:36 -0700 Subject: [PATCH 17/26] add see also --- files/en-us/web/css/css_box_model/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/files/en-us/web/css/css_box_model/index.md b/files/en-us/web/css/css_box_model/index.md index 3f4bd65febfb36d..e6ff9b2f23a7c07 100644 --- a/files/en-us/web/css/css_box_model/index.md +++ b/files/en-us/web/css/css_box_model/index.md @@ -131,5 +131,6 @@ The CSS box model module defines the physical, or "page relative", padding and m - [CSS display](/en-US/docs/Web/CSS/CSS_display) module - [CSS flex layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module - [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module +- [CSS table](/en-US/docs/Web/CSS/CSS_table) module - [CSS positioned layout](/en-US/docs/Web/CSS/CSS_positioned_layout) module - [CSS fragmentation](/en-US/docs/Web/CSS/CSS_fragmentation) module From b9d810a4904d2d6aba25064c4dc2d40224ddce5f Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 24 Apr 2024 23:45:47 -0700 Subject: [PATCH 18/26] Apply suggestions from code review Co-authored-by: Chris Mills --- files/en-us/glossary/intrinsic_size/index.md | 12 ++++++------ files/en-us/web/css/css_box_model/index.md | 8 ++++---- files/en-us/web/css/css_box_sizing/index.md | 10 +++++----- files/en-us/web/css/fit-content/index.md | 2 +- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/files/en-us/glossary/intrinsic_size/index.md b/files/en-us/glossary/intrinsic_size/index.md index 19186ce6527b87a..7c1bef66d03e60d 100644 --- a/files/en-us/glossary/intrinsic_size/index.md +++ b/files/en-us/glossary/intrinsic_size/index.md @@ -6,21 +6,21 @@ page-type: glossary-definition {{GlossarySidebar}} -In CSS, the _intrinsic size_ of an element is the size it would be based on its content without regard to its context. The intrinsic size of an element is the size an element would be if no external factors, like CSS [box model](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) properties, were applied. An element's intrinsic sizes are the element's {{cssxref("min-content")}} and {{cssxref("max-content")}} sizes. +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/CSS/Building_blocks/The_box_model) properties. An element's intrinsic sizes are the element's {{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 ( 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, or {{cssxref("min-content")}} size of a {{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 a inline-size of `0px`. For text, the `min-content` size 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 `min-content` size would be defined by the longest word. The keyword value of `min-content` for the {{cssxref("width")}} and {{cssxref("inline-size")}} properties will size an element according to the `min-content` size. -The maximum intrinsic size, or {{cssxref("max-content")}} size is the opposite. It is the size the element would if the inline-size of the container were infinite. In the case of text, this would have the text display as wide as possible, doing no soft-wrapping, even if an overflow was caused. The keyword value `max-content` exposes this behavior. +The maximum intrinsic size, or {{cssxref("max-content")}} size is the opposite. It is the size the element would be if the inline-size of the container were infinite. In the case of text, this would cause the text to display as wide as possible, doing no soft-wrapping, even if it overflowed the container. The keyword value `max-content` sets this behavior. -Intrinsic sizes and the way 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 sizing module](/en-US/docs/Web/CSS/CSS_box_sizing). -For images the intrinsic size has the same meaning — it is the size that an image would be displayed if no CSS was applied to change the rendering. By default, images are assumed to have a "1x" pixel density (1 device pixel = 1 CSS pixel) and so the intrinsic size is simply the pixel height and width. The intrinsic image size and resolution can be explicitly specified in the {{Glossary("EXIF")}} data. The intrinsic pixel density may also be set for images using the [`srcset`](/en-US/docs/Web/HTML/Element/img#srcset) attribute (note that if both mechanisms are used, the `srcset` value is applied "over" the EXIF value). +For images the intrinsic size has the same meaning — it is the size at which they are displayed if no CSS is applied to change the rendering. By default, images are assumed to have a "1x" pixel density (1 device pixel = 1 CSS pixel) and so the intrinsic size is simply the pixel height and width. The intrinsic image size and resolution can be explicitly specified in the {{Glossary("EXIF")}} data. The intrinsic pixel density may also be set for images using the [`srcset`](/en-US/docs/Web/HTML/Element/img#srcset) attribute (note that if both mechanisms are used, the `srcset` value is applied "over" the EXIF value). ## Extrinsic sizing -The opposite of _intrinsic size_ is **_extrinsic size_**. Extrinsic sizing determines sizes based on the context of an element, without regard for its contents. Extrinsic sizing is determined by box model properties values. With extrinsic sizing, percentages specify the size of a box with respect to the box's containing block. +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 diff --git a/files/en-us/web/css/css_box_model/index.md b/files/en-us/web/css/css_box_model/index.md index e6ff9b2f23a7c07..b2857982e3a98d9 100644 --- a/files/en-us/web/css/css_box_model/index.md +++ b/files/en-us/web/css/css_box_model/index.md @@ -9,13 +9,13 @@ spec-urls: {{CSSRef}} -The **CSS box model** module defines the height, width, margin and padding properties, which, along with [border properties](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders), make up the CSS [box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model). +The **CSS box model** module defines the `height`, `width`, `margin`, and `padding` properties, which along with [border properties](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) make up the CSS [box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model). -Every visible element on a webpage is a box laid out according to the [visual formatting model](/en-US/docs/Web/CSS/Visual_formatting_model). CSS properties define the size, position, and stacking level of each box, with the box model properties defining the space in and around each one. The size of a box can be defined by various properties, including the CSS box model properties defining an element's extrinsic size. +Every visible element on a webpage is a box laid out according to the [visual formatting model](/en-US/docs/Web/CSS/Visual_formatting_model). CSS properties define their size, position, and stacking level, with the box model properties (and others) defining the extrinsic size of each box, and the space around them. -Each box has a rectangular content area, which is where any text, images, or other HTML elements are displayed. The content may be surrounded by padding, a border, and a margin, on one or more sides. The padding is around the content, the border is around the padding, and the margin sits outside the border. The box model describes how these features — the content, padding, border, and margin — work together to create a box as displayed by CSS. +Each box has a rectangular content area, inside which any text, images, and other content is displayed. The content may be surrounded by padding, a border, and a margin, on one or more sides. The padding is around the content, the border is around the padding, and the margin sits outside the border. The box model describes how these features — the content, padding, border, and margin — work together to create a box as displayed by CSS. -The CSS box model module defines the physical, or "page relative", padding and margin properties. Flow-relative properties, which relate to text direction, are defined in [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values). The box model module is extended by the [CSS box sizing module](/en-US/docs/Web/CSS/CSS_box_sizing), which introduces {{glossary("intrinsic size")}} value and enables defining aspect ratios for elements that are auto-sized in at least one dimension. +The CSS box model module defines physical (or "page relative") properties such as `width` and `margin-top`. Flow-relative properties such as `inline-size` and `margin-block-start` (which relate to text direction) are defined in [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values). The box model module is extended by the [CSS box sizing module](/en-US/docs/Web/CSS/CSS_box_sizing), which introduces the {{glossary("intrinsic size")}} value and enables defining aspect ratios for elements that are auto-sized in at least one dimension. ## Reference 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 a0f88143548fc3e..fc9bad1ae57d4e8 100644 --- a/files/en-us/web/css/css_box_sizing/index.md +++ b/files/en-us/web/css/css_box_sizing/index.md @@ -9,15 +9,15 @@ spec-urls: {{CSSRef}} -The **CSS box sizing** module defines sizing, minimum sizing and maximum sizing properties, and extends the CSS sizing properties with keywords that represent content-based {{glossary("intrinsic size")}} and context-based "extrinsic" size, enabling describing how elements fit their content or fit into a particular layout context. +The **CSS box sizing** module defines sizing, minimum sizing, and maximum sizing properties. It also extends the CSS sizing properties with keywords that represent content-based {{glossary("intrinsic size")}} and context-based "extrinsic" size, enabling developers to specify how elements fit their content or fit into a particular layout context. -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 (with border properties defined in [CSS backgrounds and borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) module). The box sizing module extends the box model module to enable an element to be sized intrinsically, enabling explicitly setting an element's size to be based on the size of an element's content. +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). The box sizing module extends the box model module to enable an element to be sized intrinsically — setting element size based on the size of its content. -The sizing values introduced in this module allow elements with [size containment](/en-US/docs/Web/CSS/CSS_containment#size_containment) to specify explicit intrinsic sizes, enabling boxes to size as if its in-flow content totals to a width and height matching the specified explicit intrinsic size rather than sizing as if it were empty. +The sizing values introduced in this module allow elements with [size containment](/en-US/docs/Web/CSS/CSS_containment#size_containment) to take explicit intrinsic sizes — as if their in-flow content's width and height match the specified explicit intrinsic size, rather than being sized as if they were empty. -This module also introduced the ability to define a ratio for an element's box meaning the browser can automatically adjust an element's dimensions to maintain a specified aspect ratio as long as one of the dimensions is automatically sized. +This module also introduced the ability to define an aspect ratio for an element's box, meaning the browser can automatically adjust an element's dimensions to maintain a specified aspect ratio as long as one of the dimensions is automatically sized. -The [logical properties and values module](/en-US/docs/Web/CSS/CSS_logical_properties_and_values) expanded the properties available in both these modules to include writing-mode relative equivalents of the corresponding physical box model and intrinsic box sizing properties. +The [logical properties and values module](/en-US/docs/Web/CSS/CSS_logical_properties_and_values) expanded the properties available in the box model and box sizing modules to include writing-mode-relative equivalents of the corresponding physical box model and intrinsic box sizing properties. ## Reference diff --git a/files/en-us/web/css/fit-content/index.md b/files/en-us/web/css/fit-content/index.md index d9a4d22a810db9e..f8eabcf04e7cf06 100644 --- a/files/en-us/web/css/fit-content/index.md +++ b/files/en-us/web/css/fit-content/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.width.fit-content {{CSSRef}} -The **`fit-content`** behaves as {{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`** 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")}}. 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. From 5f95017c5e0abee26b6a4786055872621ece6508 Mon Sep 17 00:00:00 2001 From: estelle Date: Wed, 24 Apr 2024 23:52:20 -0700 Subject: [PATCH 19/26] box model image --- files/en-us/web/css/css_box_model/boxmodel.png | Bin 0 -> 9673 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 files/en-us/web/css/css_box_model/boxmodel.png diff --git a/files/en-us/web/css/css_box_model/boxmodel.png b/files/en-us/web/css/css_box_model/boxmodel.png new file mode 100644 index 0000000000000000000000000000000000000000..4f0f1bdf0daf268bf8b6105f847dc4ccb205a5a4 GIT binary patch literal 9673 zcmZ`<2|QHq`X6cewb8DaX(~yjNWvIfi;|x$ktHEb6tawM>?$E-B-!_bG?vC>HztW= z-_6*!v2TOH7~A~M(7m_&zxRGV&N=Tq@3Xz{^L@VW`Hb3}n5APlb1hQZ0uEKo? zgcE>3wl)662}=AO=2_rl`?DLWHy{vv(B3uU9pGmUyZeeaA({2iaZnp_PetoCi^Uol z86gk|y1KfNk&$FFIXgQW)YQ?@86F;{P$)ls{E(BAD=8_Nnwny<7%B-ACUa$ee!e~4 z5b~EggT-Q!V*Zjz*Ru$J!hByvk+F})Ri2#eW)<7hT(iZ(g;#jkk%7kYV)V3)KvAMny za?QVegcedwgGj_a-wlb43|^fZ%OenG$NFmq#x1SQAkO)Wu^!fRUqfyJ1eNmLPpQOL z_*MdiwbW1x{J>x^|Q!KPCKP< zrDJj3X&;2}TzGY1HZ$=fIyhx^dd%K8Ah8g5gzL=12t#hz#FchjaxT!fdN(>g(>=*b z(1lRi2RM%Tg(u)M0w4Ke>{ltN5c9l%&zS+-kbeBLi*HNAy{${@+TW`|AS%9$p-S33 z1A+>T4|Rn+2&MFNr4ovSmGpmxsU{dfY}BR0NPYK2AkX5;Ai^S~qTHw1J)=!u?+3-V z)f93nHREmWR2rLxj>m5f&D{a^(t* zocdlv{q7#cyu8%>I1G7%_AMfnW}@8zft-RUDcsO<>YVEFeDQIZqiP;n&lSuxag2NA_c~V5+c%GhK^G^hP#c2epx#E zb{Qz`AFbFwdQRL;r~BJoa|9q871Di0Bsx6yhKTgiYg=BsoMqO7;lf2_bHo8j=w0)C zqfNaA*{JX>Jt>i*rY1Dk=&|c}suNK!u^f$}5aiD5z;#E5m~g-za>CDvV>7pZyM0c4 z#Tm(Ys)ai2y8Y$8a>gr&{l0(Ljva@@||VVrV00C^{6PGpH$@8{4}Hb58ARnF7)=IPOV8Z`Z# z?9;%yV^kWok=&41Fy`9TSD04Qv+=^I>B}dFXm|H;eR+qzU0w}(`m)1xX1%`vE*<`` zzIGeYO{Ms6^EykD6?6xu`Dcgd@36NqoPAdBvs?E#e%E7lrDn)GM&sW*JX(LdnC}^M zqN`!iB0*A`OG%I4phDMm=!OY?IIPk!toe*+M}eis6jJ9Eoo84q@4EF&P!XTtFRk^b zB^&g)Jvlv!$d+dR8~iRah!pd4A$u20fket{*vQ)zZy@svU^@U$Io9BxfOHg2Z|%}M z?YTU}f!4FsKwPvo`ib33JL+kkfJ&f98=h9M`DAXLe!y~nA(cZY!?%FEGeq^XDQSI| zg*Qnd_P)OB3%e*N1$`cA^Ra4&3m(C}bX{*@Xel&yZ-wVM7)%nES z6`0V82&{>Gl)xiR_WiMAgjYMAN@K~nWb%zWWzIM$TwA!%BWl$MW@r^6g?Taq znjL|a$DJ<{7`0E-7+Cra80UC1UQRVERRp_omW(g(b-DM#QziiW%6=vvVXKEjlu%QY zo4fa)k-#RPPW4E0<>*gJ{=!^xyla<;8!!BfIyEirp`k*1--DFEm>iSSOQIc0M4ciA z;imOPO$Jn+0j0)E!&%I!pjQhMPG8;078vLybnjEChD8Go)v`m~;d)9yhZjjwyhTNm z2FJ;@^@Nd*;Tf?LwY$PMVk9;CdYU>PTcV3)9E{tyO-1=*QVI zdQPr2cT001hF$ow1mU-5gg6k3iwR;`Bm< ztb(z`CA6jGbli}~5Yd`Kw#qV|$o_&-A55kiUZX?}8=YnFUnU3bJC9I^+$ zwG!%$vPdKt1i2IDg&mK;4oo;Lj9P4arBkw+Mx6MOWIhq!p31|uk>D}Dh_l${kfnSA zx%T|jEDn1j7@J{odK*rVk7*s2*d;ev1pZ^g@5(=qi4E&U@sm>?yle63NS&K^8cMpJ?uSv=d z2DbN;lWZDAVX5gTQPpbG^{12c731tA>W7dO(E}L|g0}DCN%P%{$2u$eW5*HVFp-XP z)?ZJ0HC%>%J*lQtV02lM_ySY>bPezM9Vh5J^qEH$aKUsVA87|_N)IWgpjf?g)>l(E zbJmS-o`B5-_e?ZMnfC`xbX;gb`{q1)Xxt}y$eaSB>2OM?59dr&?d(DKTsrp=jCLC~ z$%wU2-EnzEOZRe+hV;-j*%JKet8%vkWs;<=(CYyg8(}p2~of)mScXYyY%KZD!y09dg*v~o=cliuJm zERAf?1y&HNZ(SrrI?*jP@aawyIi>=@c0a94w7z82{H$U!ptei>>Sy6w`ashReKfc% z*$wq&X4%phLzKhJ_Lm#j#|XgaOzOL7-R+Fn0v*|0@iDjZAUSC}l81aj1)7z!$3SLj zX0BtzT`-nFva6XhU-vl*du9u)5!3XV&ecH{E zx>|2Nf<$L5p zESP(X=pT;2S^Irkjf}9EwtVrz?R=^KEx~hdj8HD1n%FDPPvU7}htea=Wn~OYx0@IP zoV%LQWQRvjRLwnJAKgJNi#T)cygqX2tRYfu6$>}^jClZa4aBw(s2Piki#3sO5J^Wm z3p?@(&M&v@9=Od=(3ZtNet;+*d-%OB6)VeUxbW?*!<3<@`)L2FhiQhv6rK6i%T@4A zSyp|n=hb#5*>4ut=3unqHX30LCYrVH_-T`Y>8rA+R2l_`JR>${xUt-F7eEV5QO#L) zWNNvk>D0@ODs8$eZlgL_64rvJz!dkN5Ue#3(r@!3&mS56JR+!TY&4q9MYwgpK93TP zd&dXmvlV!U9d9qf*2LIpKRkU0Sq2_&_;)qAU3=QlX2DVhj;53Fk(D;~eoa{dsqkv| zhw7agA>%Tq!@k7DAAAz_(8IcJP&W8QQHG6!+hRKFa1qta#jDJHNrJuScm_-aYA(AP z+d5#F8;zT64&}NpC4$33)dY1xUhBB$`eP+@1w!n2Xk`JGD+SdcZI~Em2|Y+WNpu;P z?;{ysyo~+z++5|`&o=yqbIzx4&GI$SFI~oL4CC`)xPbd3_Dhx)ifdWCKu1=!G@iLts)$P`JRFz~QYG4LDPilzGm$a%++Vpx4Ib#= zo)j55Fp*b#-EXVI0yHNQWe>@KaD%yap&xioo@ajK(xT*d@je$1oxmCGZCe&G89XZM z=%ziRHW=q3dbBoVRmN#Aw9egKFF}v_ zO18Qi+Q<08=(5`)+t9z>RT}7tHx=cil=qb^!k1>`a{cHpsmtXTWu^Q=&I#;5erP-% zbzpl$`VO7bC*Hpiu8P7O<*>Zq?GL_@|Gd8M+Hv!jqKT^Sc3#xZ^}*)q>nAp8bEf22 zB(D>cECdSE^u^6OQ!Ja86!XkmHXV?4M77*5}=q^E&9&@?y z3EfLqez*zuNtwzXAW6$Th?SUbjv?bKn3hEm{oX~ABThiTl3vm^gF5&+HIXS ze?~y6UFd6BfT83r_i{vYyvh3VwB$5b=J)-k)(g^iT%ALZGfyQ7#HSl+fzhO{?41Cj z0^JL}u&?6__7j_M{A7a5+~`_*$LEn>c) z{t`)D<0SPsAZLF`zf(Tb*||h)NX6zIDqhMky?*vcxYj`^6(Nr$y_W-O?K5wl~YIqLZ%+CwWQ!5NFx&%)hD(J9Eer!vF zY0f{*ktPoLnX(;6Rhm7M5$TI{l*DpQA_6duzH-;;4Gn&S$AQlGnR$YxFHz9d4s>=8 z;`75R{l@_hN4J|$&29S;6?jh=rUr!!*a@Y!ld#GeUjC&Vzy=!nVKPYQ)8UvCjpp#y z^H8_w-J~u#ObkzPoTJRZlnvJWFYaGmSUQY_%v6OPMX7HGHe|{bifnZSm(veHSLcqn z8USr|zM=i?o~g&};5rxJ+OJWp*e7P4uX5(i1Q1JI7q~vdkFyOuq|1lKBKT2J;-&Zo zHGGk_0`?Tczw6!U!_Zaw5#`7*rLDqJBf!KF=MWX5SU+x={RqU8 zf%#&yZY9ij&QGD@FBo*K|DNn|z^lBY|^2{CyQ4>1>l-hM0 zMz`8PcLLZreSBD=BFmr_>n z%4Mrv6#Q$+n90A+TA-olff*kV{%?Nan^dp^h%0^q70!8Rs1^|Eh3eY{GQnmEz~-PL z6r86!8{MsOe4P*V^*y^1Ug+l749vQ+Rb*p;cNC^YTeVNoyZr$p&pWFI2cLx4G0Q4^ z__yYz11Zda2WHq*HOhC{iU#XQZ0ZR~QxMXKC7Y%0bQuX)^bgt(FxZrDjDGghD&zfN zY`pvrIenSo4|DV(LV0;n;I{m=o9MZZWt|m!{Y>}=xrRlEp3^0h`?K}{Iw5dAc~3mc zVBAT+r-VUrpI$L#!@|3EUh*A}y$_liUD4pIZq{i|Kf0mx)sVO%H5aA69>{D69nAD2NS9;ioDjhJ=}eDTA<4m?Hb!#iMe3^x^u;dE*EdlPGr!7v{A^l&?Lh^uymFP0zfz>hoK2`!f%UN*)!PYuD?!FSa1o4#5Vu#9ywQ8ycADA$Lf3Yfc0 zvSc5J{_ISuXb{ZV(;-LpB;Ht!X4>5m$BH5Am5YfW_ywgu{c^vdpJXlRA=h)Zde{<+ zvO~U2?EY#LG@j*ASe3t+Qj81#>2eCerT@8Ib}%%S(TMDLl$-0{%p83pF_I){xAwW< znGpLBxT(1B{JM42l$%_3#q#td*6P*bQFLB37S6h`=nL6g1fd%$UAWqHu~@w)G3>3u>(DFR46v}QTb-ifH6Lwrc zLh<#Ykr|g-QeyF%>sP8&)RKs+$KrY}6<{mz$YJ0)rg!^73mwgHvSu!GjB<+&O8C2- z^E!c_3fF|lYZIzV`7Kck$+tFr3JaV7SZ1$Q!*<}8AV|Fb zkKx#w?2h{vN3xGNw)=l$!mSY0hWD;ByS=H|T{Sk)sHbyQtDX4Q;SSqvp!wfUg2y5| zsef~{mF3Agd{9`RmI>p1m`ROXM-ZshF0FUePl1=BF(lkHl& zr)=&~HCsze4+-^a)p^E<7?}#NVK30R)}`#Jx+C`mN&nfqJZ#Lxqz*q)t@{vFwqBj` zOgJLiP=z$AKWgg!vHb-rx8_Pm>P*a4la2_v^supX^+WaKVM5@UVh%PIv4lB$g>xR= zz4o&~i z^rBmbJE|y%=eDH9uOfEQN0Fc2JYwcMYc8B+R29JHlx-OoarvR%*6W7{JyxeWmxNb+ zq_8ihLmS$kv%J5>eQ6Q?d|OgSTo>G6=pB0*rHUxWyO84GiGmNqFWkHy-09kwI@mwo z(3LZzW|AcaScJ|iOj-hx+3>WVU@c`l;NfDYYu1wS!^NF0miTioU~kVSl}NM(E*G@gF;Ov7m{WaNDkL8nTYn8i;OMzeg;OdYE@h>sPf6m+=XQou_ctdRyd&#%DeQk} zuZk($({Z#JA2HdMP!M1<2j_Zn6hPD)*OJXUhrSwQjyEj*sxeJ|;cyOhGJEDCFFDxT zF@0&y#l&9e$ovy~^NhCLcfi-kM<(uPi4>)`eD)4riwiYjvpa`x$eN#y<~{1zJRCQf z)0+7Tetd~mt_G5dB1|&qM3qCEk4a#`EwkNS0!zn|>!+jcJ{k5;zkx|xSj{MMyv|M{ zhYEtiwL94^N%K-_XRDX_dgreKOk`BBhb8{+zVROOrRgIFKs4j9w;ejrZr_SrKeK#r z&fTVUZx9)~N47QLl;O^g1@H)PQZX#h(cg&`S`CVg# zE63w96!Yb>c}T(EeQB@q(!8&MY-2~3J7$7g;ITdgtIj3m8sk(PF0UF(qIb-k)6Xq7 zS#;iCjsLP7anedYYupPY!Z!Rpil(K}!KP<*KR<+g67f%?v_-jgaHslN3}WF~W8q#( z!7lXbUCe8C)4bnR`%b*RYQ5m5`|1IBn)?QaOLQEZe&TGb>2{;aW}^D7TJnnJwm|6+ z(c9jgg|E@ZFN`P5I*+W(@aErFW08oiuECSS5QIl=#k&y4XJV6gECiyb%|AW9bx1XP z^44Lmz#F-VDL$|LSDxq}40(Lz$?6%dV zyyRoC7E>B6f||K~gD2fktM{qQ)cccb;|d?_;}s1&pHdwdMO~O9Z^inekzcX=BzUDC zCRcb#o>F*JXSCv^HKNP;LXQiptH3tR?`m;)36ZEanZ;D__gH_CSy40_r>n2ozT87yz}q1der~cD15^jPZ!g=}kEvVVH`dT(*_5W%jme zIK=Q{kNQz>0Gldk&}tBLRQ}HgG+@i^@5ev9Zw1NXXB_Nz8nTr?uoWLP`-lE!{6CHU zdwRYjPF7Zzpy~~3b}|yf%a)4MPN$sqP9qedLWck^Eb5Ph*q;9gz(B|?x5mlRT z#PxdGvKqqlN+$dVBdCG4Yhzu?$?noRhNy|S&OHoavBsjokObWE@S?v8b1{6hiZP-#KCs2XjBC_4O@AX7wG7U-Gb-(72w(wUu zQdW7BB_lOdQ%s87sEenIw!W+Oz91ZhR+lTWkO#{_F*x-|)aJCaO!tW(YpGsGx2^#X zta9qlxeKdc$xeQv!mZ-7NRNbNKdAJ;9e;Ikk^82@W-O&QQ0(hd)C#QmFG=y4KB?u^O= z;|6GQOp)qK_@T#2+O<0oLUtoRXPU=7uo&Vqngkgva3!{E@1$eHcb*3Lb73TLaAWya zpxuv{1`ug{Gs`yg`LZ-lRV;wyW7(R|1#?Eyuexfl#nW-%a_(Z~ja)^cWA4d|qHWJg z`q~%dDI%VGM$O{(a1-Z)I)hlu`*bu>NX?zhYy*=y0@N%uG9{;_82$4oI%9#U>w?c- zK4T6wG6G5@9b&Pr(JPqoiSfuF!MaHv&+?XU^Tf2I354P#$JN-yK6o?&o#xa7X1+$!W8n%%32FIid&Q!jiBnn{%k~$ z8~#BNzk7b`QM_?66mRn=_KWTBPDFT9+_xi67IbsJ0RaUP$e+!~?(g4BvDxx$e)*$2 zx7weYD0MP?GN>j~{$#xET5gh~%z3OU136?2Cdl(s zVmkR13d`>Z#mY+Iqfpo+$Cw!VT0d}riHW(;Q@0HSXVYA>!g;&vpO8%kx(MeSaT#K_ zO=_*p(g8yO%B;Pq(;3R_Mf$^aF$_AQ2kPETQyLRsI6^-yN3w=z3Sd_#`<5Lh3h z?e;gA`bZA*8k!hdL^)nXwv0GkgXz@NeHFT79o9o1;+^RLZ}l_I)dfB}k(7MZqUyQ3 z$S}l+E?5L~E&i7%a0q}Z@4(2MqrjDuM%x)Ff6qyuv}e~w04wz$ikletEd>`;K6fB) z$j%O`tbtS;aDa1MxDU+iIs^J;pBw*j|NpJFf`ZbcjdRxrb)iM@x4#qlpPHLK*-4vS zg01#yfq_aSANcom<<@V2zo5}){}uqh`s(hcJ^Q%2^v~%3V{Z4l)`v1`U zXHLAzKwdA>4Nxz>>7OC!LqmAy{lz%={!WQ#{+|m#|0}jKRQZoo4gr)h^ubL1j|k!F z+u*MAP2@jja0YJ`1Kdr4KepTtwJF%D0DIkjD6l{WrI(0l_t&sJ6va)^f9Py^_+22g z?J(}4!t#0C*<>NWwh4b$>BE2g@iKPW!a0=q{KLTrN>Js&tyuqcbQ>)rIU0Y<|EiO~ zfAQ1|0UcfNCL zh_GMyv)E(}JGbX&KFY3LYwEGj956S{kFsz=ip31^X4(g7&+m`UH3P(^Z(RVQc}*}i z(S^}<;*aY0g>N=U$fL68B1OqjJ_*Yf?DNjp-4Ch*vst){7|B?R{HPO|BfN3-`vePo tgnE)f-O5rdI}fUMDLn$SYj&7mExwcw_!@)YX8&JU>9(3e=FP{i{}0eg+zJ2y literal 0 HcmV?d00001 From b1e433bb60f0806c5a098ac5592db477d2e10263 Mon Sep 17 00:00:00 2001 From: estelle Date: Thu, 25 Apr 2024 02:17:53 -0700 Subject: [PATCH 20/26] add box model image to module page --- files/en-us/web/css/css_box_model/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/files/en-us/web/css/css_box_model/index.md b/files/en-us/web/css/css_box_model/index.md index b2857982e3a98d9..209c75e9deea59a 100644 --- a/files/en-us/web/css/css_box_model/index.md +++ b/files/en-us/web/css/css_box_model/index.md @@ -15,6 +15,8 @@ Every visible element on a webpage is a box laid out according to the [visual fo Each box has a rectangular content area, inside which any text, images, and other content is displayed. The content may be surrounded by padding, a border, and a margin, on one or more sides. The padding is around the content, the border is around the padding, and the margin sits outside the border. The box model describes how these features — the content, padding, border, and margin — work together to create a box as displayed by CSS. +![The components of the CSS box model](boxmodel.png) + The CSS box model module defines physical (or "page relative") properties such as `width` and `margin-top`. Flow-relative properties such as `inline-size` and `margin-block-start` (which relate to text direction) are defined in [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values). The box model module is extended by the [CSS box sizing module](/en-US/docs/Web/CSS/CSS_box_sizing), which introduces the {{glossary("intrinsic size")}} value and enables defining aspect ratios for elements that are auto-sized in at least one dimension. ## Reference From 9b835d2c8d26c9c3ac5db7c6909f6e2a039b53d2 Mon Sep 17 00:00:00 2001 From: estelle Date: Thu, 25 Apr 2024 02:18:33 -0700 Subject: [PATCH 21/26] add live examples to glossary page --- files/en-us/glossary/intrinsic_size/index.md | 37 ++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/files/en-us/glossary/intrinsic_size/index.md b/files/en-us/glossary/intrinsic_size/index.md index 7c1bef66d03e60d..dc45791175db678 100644 --- a/files/en-us/glossary/intrinsic_size/index.md +++ b/files/en-us/glossary/intrinsic_size/index.md @@ -10,10 +10,47 @@ In CSS, the _intrinsic size_ of an element is the size it would be based purely 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). +#### min-content + For example, the minimum intrinsic, or {{cssxref("min-content")}} size of a {{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 a inline-size of `0px`. For text, the `min-content` size 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 `min-content` size would be defined by the longest word. The keyword value of `min-content` for the {{cssxref("width")}} and {{cssxref("inline-size")}} properties will size an element according to the `min-content` size. +```html hidden +

Text wraps making element only as wide as its longest word.

+``` + +```css hidden +p { + width: min-content; + background-color: palegoldenrod; +} +``` + +{{ EmbedLiveSample('min-content', '100%', '200') }} + +#### max-content + The maximum intrinsic size, or {{cssxref("max-content")}} size is the opposite. It is the size the element would be if the inline-size of the container were infinite. In the case of text, this would cause the text to display as wide as possible, doing no soft-wrapping, even if it overflowed the container. The keyword value `max-content` sets this behavior. +```html hidden +

Element grows as text doesn't wrap.

+
+

+ This paragraph may be wider than the width of the entire page and yet it + won't wrap because width: max-content is set, and therefore may + overlow the container. +

+
+``` + +```css hidden +p { + width: max-content; + background-color: palegoldenrod; +} +``` + +{{ EmbedLiveSample('max-content', '100%', '200') }} + Intrinsic sizes and how they are calculated are defined in the [CSS sizing module](/en-US/docs/Web/CSS/CSS_box_sizing). For images the intrinsic size has the same meaning — it is the size at which they are displayed if no CSS is applied to change the rendering. By default, images are assumed to have a "1x" pixel density (1 device pixel = 1 CSS pixel) and so the intrinsic size is simply the pixel height and width. The intrinsic image size and resolution can be explicitly specified in the {{Glossary("EXIF")}} data. The intrinsic pixel density may also be set for images using the [`srcset`](/en-US/docs/Web/HTML/Element/img#srcset) attribute (note that if both mechanisms are used, the `srcset` value is applied "over" the EXIF value). From 64e63c11a04ede51148dfbbcbd5a17f2da04a306 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 25 Apr 2024 09:29:21 -0700 Subject: [PATCH 22/26] Apply suggestions from code review Co-authored-by: Chris Mills --- files/en-us/glossary/intrinsic_size/index.md | 12 +++++++----- files/en-us/web/css/css_box_sizing/index.md | 2 +- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/files/en-us/glossary/intrinsic_size/index.md b/files/en-us/glossary/intrinsic_size/index.md index dc45791175db678..a7119d6d84a4048 100644 --- a/files/en-us/glossary/intrinsic_size/index.md +++ b/files/en-us/glossary/intrinsic_size/index.md @@ -15,7 +15,7 @@ Inline elements are sized intrinsically: [sizing](/en-US/docs/Web/CSS/CSS_box_si For example, the minimum intrinsic, or {{cssxref("min-content")}} size of a {{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 a inline-size of `0px`. For text, the `min-content` size 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 `min-content` size would be defined by the longest word. The keyword value of `min-content` for the {{cssxref("width")}} and {{cssxref("inline-size")}} properties will size an element according to the `min-content` size. ```html hidden -

Text wraps making element only as wide as its longest word.

+

Text wraps, making the element only as wide as its longest word.

``` ```css hidden @@ -29,15 +29,15 @@ p { #### max-content -The maximum intrinsic size, or {{cssxref("max-content")}} size is the opposite. It is the size the element would be if the inline-size of the container were infinite. In the case of text, this would cause the text to display as wide as possible, doing no soft-wrapping, even if it overflowed the container. The keyword value `max-content` sets this behavior. +The maximum intrinsic size, or {{cssxref("max-content")}} 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 `max-content` sets this behavior. ```html hidden

Element grows as text doesn't wrap.

This paragraph may be wider than the width of the entire page and yet it - won't wrap because width: max-content is set, and therefore may - overlow the container. + won't wrap because width: max-content is set. It therefore may + overflow its container.

``` @@ -53,7 +53,9 @@ p { Intrinsic sizes and how they are calculated are defined in the [CSS sizing module](/en-US/docs/Web/CSS/CSS_box_sizing). -For images the intrinsic size has the same meaning — it is the size at which they are displayed if no CSS is applied to change the rendering. By default, images are assumed to have a "1x" pixel density (1 device pixel = 1 CSS pixel) and so the intrinsic size is simply the pixel height and width. The intrinsic image size and resolution can be explicitly specified in the {{Glossary("EXIF")}} data. The intrinsic pixel density may also be set for images using the [`srcset`](/en-US/docs/Web/HTML/Element/img#srcset) attribute (note that if both mechanisms are used, the `srcset` value is applied "over" the EXIF value). +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/Element/img#srcset) attribute. Note that, if both mechanisms are used, the `srcset` value is applied "over" the EXIF value. ## Extrinsic sizing 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 fc9bad1ae57d4e8..1922fbb58e5ebb1 100644 --- a/files/en-us/web/css/css_box_sizing/index.md +++ b/files/en-us/web/css/css_box_sizing/index.md @@ -13,7 +13,7 @@ The **CSS box sizing** module defines sizing, minimum sizing, and maximum sizing 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). The box sizing module extends the box model module to enable an element to be sized intrinsically — setting element size based on the size of its content. -The sizing values introduced in this module allow elements with [size containment](/en-US/docs/Web/CSS/CSS_containment#size_containment) to take explicit intrinsic sizes — as if their in-flow content's width and height match the specified explicit intrinsic size, rather than being sized as if they were empty. +The sizing values introduced in this module allow elements with [size containment](/en-US/docs/Web/CSS/CSS_containment#size_containment) to take explicit intrinsic sizes, as if their in-flow content's width and height match the specified explicit intrinsic size, rather than being sized as if they were empty. This module also introduced the ability to define an aspect ratio for an element's box, meaning the browser can automatically adjust an element's dimensions to maintain a specified aspect ratio as long as one of the dimensions is automatically sized. From eb57352aedfa5b3c531ef26101dd8bd44ec066c5 Mon Sep 17 00:00:00 2001 From: estelle Date: Thu, 25 Apr 2024 09:50:26 -0700 Subject: [PATCH 23/26] instrinsic glossary reordered. --- files/en-us/glossary/intrinsic_size/index.md | 48 ++++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/files/en-us/glossary/intrinsic_size/index.md b/files/en-us/glossary/intrinsic_size/index.md index a7119d6d84a4048..935d97e2fadb167 100644 --- a/files/en-us/glossary/intrinsic_size/index.md +++ b/files/en-us/glossary/intrinsic_size/index.md @@ -10,52 +10,52 @@ In CSS, the _intrinsic size_ of an element is the size it would be based purely 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). -#### min-content +For example, the minimum intrinsic size of a {{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, or {{cssxref("min-content")}} size of a {{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 a inline-size of `0px`. For text, the `min-content` size 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 `min-content` size would be defined by the longest word. The keyword value of `min-content` for the {{cssxref("width")}} and {{cssxref("inline-size")}} properties will size an element according to the `min-content` 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/Element/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). + +#### 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. ```html hidden -

Text wraps, making the element only as wide as its longest word.

+

Text wraps, making the element only as wide as its longest word.

``` -```css hidden +```css p { - width: min-content; + inline-size: min-content; background-color: palegoldenrod; } ``` -{{ EmbedLiveSample('min-content', '100%', '200') }} +{{ EmbedLiveSample('minimum intrinsic size', '100%', '200') }} -#### max-content +#### maximum intrinsic size -The maximum intrinsic size, or {{cssxref("max-content")}} 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 `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 overflowed its container. The keyword value {{cssxref("max-content")}} sets this behavior. ```html hidden -

Element grows as text doesn't wrap.

-
-

- This paragraph may be wider than the width of the entire page and yet it - won't wrap because width: max-content is set. It therefore may - overflow its container. -

-
+

Element grows as text doesn't wrap.

+

+ This paragraph may be wider than the width of the entire page and yet it won't + wrap because width: max-content is set. It therefore may overflow + its container. +

``` -```css hidden +```css p { width: max-content; background-color: palegoldenrod; } ``` -{{ EmbedLiveSample('max-content', '100%', '200') }} - -Intrinsic sizes and how they are calculated are defined in the [CSS sizing module](/en-US/docs/Web/CSS/CSS_box_sizing). - -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/Element/img#srcset) attribute. Note that, if both mechanisms are used, the `srcset` value is applied "over" the EXIF value. +{{ EmbedLiveSample('maximum intrinsic size', '100%', '200') }} ## Extrinsic sizing From 0bcf38cf5ceaaaa84b8b1e985446462a8c5f1283 Mon Sep 17 00:00:00 2001 From: estelle Date: Thu, 25 Apr 2024 09:52:16 -0700 Subject: [PATCH 24/26] example height --- files/en-us/glossary/intrinsic_size/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/glossary/intrinsic_size/index.md b/files/en-us/glossary/intrinsic_size/index.md index 935d97e2fadb167..984a407a46d440c 100644 --- a/files/en-us/glossary/intrinsic_size/index.md +++ b/files/en-us/glossary/intrinsic_size/index.md @@ -33,7 +33,7 @@ p { } ``` -{{ EmbedLiveSample('minimum intrinsic size', '100%', '200') }} +{{ EmbedLiveSample('minimum intrinsic size', '100%', '220') }} #### maximum intrinsic size From cd0bf46af9a897e75480ec7ed2e5bb086ebb231f Mon Sep 17 00:00:00 2001 From: estelle Date: Fri, 26 Apr 2024 13:07:57 -0700 Subject: [PATCH 25/26] final edits to intrinsic size --- files/en-us/glossary/intrinsic_size/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/glossary/intrinsic_size/index.md b/files/en-us/glossary/intrinsic_size/index.md index 984a407a46d440c..90e6be3785bb3a7 100644 --- a/files/en-us/glossary/intrinsic_size/index.md +++ b/files/en-us/glossary/intrinsic_size/index.md @@ -6,11 +6,11 @@ page-type: glossary-definition {{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/CSS/Building_blocks/The_box_model) properties. An element's intrinsic sizes are the element's {{cssxref("min-content")}} and {{cssxref("max-content")}} sizes. +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/CSS/Building_blocks/The_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). -For example, the minimum intrinsic size of a {{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 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. 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. From 10290b5a1ec30ff5c398ab05bd6bc45d449db23c Mon Sep 17 00:00:00 2001 From: estelle Date: Fri, 26 Apr 2024 13:15:54 -0700 Subject: [PATCH 26/26] final edits --- files/en-us/web/css/css_box_sizing/index.md | 4 ++-- files/en-us/web/css/max-content/index.md | 2 +- files/en-us/web/css/min-content/index.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) 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 1922fbb58e5ebb1..c8d801fb13694a4 100644 --- a/files/en-us/web/css/css_box_sizing/index.md +++ b/files/en-us/web/css/css_box_sizing/index.md @@ -9,9 +9,9 @@ spec-urls: {{CSSRef}} -The **CSS box sizing** module defines sizing, minimum sizing, and maximum sizing properties. It also extends the CSS sizing properties with keywords that represent content-based {{glossary("intrinsic size")}} and context-based "extrinsic" size, enabling developers to specify how elements fit their content or fit into a particular layout context. +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. -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). The box sizing module extends the box model module to enable an element to be sized intrinsically — setting element size based on the size of its content. +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. The sizing values introduced in this module allow elements with [size containment](/en-US/docs/Web/CSS/CSS_containment#size_containment) to take explicit intrinsic sizes, as if their in-flow content's width and height match the specified explicit intrinsic size, rather than being sized as if they were empty. diff --git a/files/en-us/web/css/max-content/index.md b/files/en-us/web/css/max-content/index.md index d24d534efbcd477..febc1e635fafae9 100644 --- a/files/en-us/web/css/max-content/index.md +++ b/files/en-us/web/css/max-content/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.width.max-content {{CSSRef}} -The `max-content` sizing keyword represents the intrinsic maximum width or height 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 {{glossary("intrinsic size", "intrinsic")}} maximum width or height of the content. For text content this means that the content will not wrap at all even if it causes overflows. ## Syntax diff --git a/files/en-us/web/css/min-content/index.md b/files/en-us/web/css/min-content/index.md index 462cf571cc508f5..9b83504a1f4fd95 100644 --- a/files/en-us/web/css/min-content/index.md +++ b/files/en-us/web/css/min-content/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.width.min-content {{CSSRef}} -The `min-content` sizing keyword represents the intrinsic minimum width 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 {{glossary("intrinsic size", "intrinsic")}} minimum width of the content. For text content this means that the content will take all soft-wrapping opportunities, becoming as small as the longest word. ## Syntax