fix(css): add snappport glossary section

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

@@ -15,3 +15,15 @@ A scroll container includes a scrollport and scroll bars.
 ## Scrollport
 
 The scrollport is the visible part of a scroll container and coincides with the padding box of the scroll container. The scroll bars are used to move content in and out of the scrollport so that the content can be viewed.
+
+## Scroll snap container
+
+If a box has {{CSSXref("scroll-snap-type")}} set to a value other than `none`, then the box captures snap positions. A box's **scroll snap container** is a box's nearest snap-position capturing scroll container ancestor.
+
+### Snapport
+
+The **snapport** is the area of the scroll container defined using {{CSSXref("scroll-padding")}} property set on the scroll container. By default, it is the same as the scroll container's visual viewport. The [snap areas](#snap_area) are aligned to the scrollport.
+
+### Snap area
+
+The **snap area** of an element in a scroll container is the area defined using {{CSSXref("scroll-margin")}} outsets specified on the element. The snap area is used to snap the element to its snapport.

files/en-us/web/css/scroll-margin-block-end/index.md

@@ -7,7 +7,7 @@ browser-compat: css.properties.scroll-margin-block-end
 
 {{CSSRef}}
 
-The `scroll-margin-block-end` property defines the margin of the scroll snap area at the end of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+The `scroll-margin-block-end` property defines the margin of the scroll snap area at the end of the block dimension that is used for snapping this box to the [snapport](/en-US/docs/Glossary/Scroll_container#snapport). The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
 
 {{EmbedInteractiveExample("pages/css/scroll-margin-block-end.html")}}
 

files/en-us/web/css/scroll-margin-block-start/index.md

@@ -7,7 +7,7 @@ browser-compat: css.properties.scroll-margin-block-start
 
 {{CSSRef}}
 
-The `scroll-margin-block-start` property defines the margin of the scroll snap area at the start of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+The `scroll-margin-block-start` property defines the margin of the scroll snap area at the start of the block dimension that is used for snapping this box to the [snapport](/en-US/docs/Glossary/Scroll_container#snapport). The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
 
 {{EmbedInteractiveExample("pages/css/scroll-margin-block-start.html")}}
 

files/en-us/web/css/scroll-margin-block/index.md

@@ -40,7 +40,7 @@ scroll-margin-block: unset;
 
 ## Description
 
-The scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+The scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the [snapport](/en-US/docs/Glossary/Scroll_container#snapport). The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
 
 ## Formal definition
 

files/en-us/web/css/scroll-margin-bottom/index.md

@@ -7,7 +7,7 @@ browser-compat: css.properties.scroll-margin-bottom
 
 {{CSSRef}}
 
-The `scroll-margin-bottom` property defines the bottom margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+The `scroll-margin-bottom` property defines the bottom margin of the scroll snap area that is used for snapping this box to the [snapport](/en-US/docs/Glossary/Scroll_container#snapport). The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
 
 {{EmbedInteractiveExample("pages/css/scroll-margin-bottom.html")}}
 

files/en-us/web/css/scroll-margin-inline-end/index.md

@@ -7,7 +7,7 @@ browser-compat: css.properties.scroll-margin-inline-end
 
 {{CSSRef}}
 
-The `scroll-margin-inline-end` property defines the margin of the scroll snap area at the end of the inline dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+The `scroll-margin-inline-end` property defines the margin of the scroll snap area at the end of the inline dimension that is used for snapping this box to the [snapport](/en-US/docs/Glossary/Scroll_container#snapport). The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
 
 {{EmbedInteractiveExample("pages/css/scroll-margin-inline-end.html")}}
 

files/en-us/web/css/scroll-margin-inline-start/index.md

@@ -7,7 +7,7 @@ browser-compat: css.properties.scroll-margin-inline-start
 
 {{CSSRef}}
 
-The `scroll-margin-inline-start` property defines the margin of the scroll snap area at the start of the inline dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+The `scroll-margin-inline-start` property defines the margin of the scroll snap area at the start of the inline dimension that is used for snapping this box to the [snapport](/en-US/docs/Glossary/Scroll_container#snapport). The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
 
 {{EmbedInteractiveExample("pages/css/scroll-margin-inline-start.html")}}
 

files/en-us/web/css/scroll-margin-inline/index.md

@@ -40,7 +40,7 @@ scroll-margin-inline: unset;
 
 ## Description
 
-The scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+The scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the [snapport](/en-US/docs/Glossary/Scroll_container#snapport). The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
 
 ## Formal definition
 

files/en-us/web/css/scroll-margin-left/index.md

@@ -7,7 +7,7 @@ browser-compat: css.properties.scroll-margin-left
 
 {{CSSRef}}
 
-The `scroll-margin-left` property defines the left margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+The `scroll-margin-left` property defines the left margin of the scroll snap area that is used for snapping this box to the [snapport](/en-US/docs/Glossary/Scroll_container#snapport). The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
 
 {{EmbedInteractiveExample("pages/css/scroll-margin-left.html")}}
 

files/en-us/web/css/scroll-margin-right/index.md

@@ -7,7 +7,7 @@ browser-compat: css.properties.scroll-margin-right
 
 {{CSSRef}}
 
-The `scroll-margin-right` property defines the right margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+The `scroll-margin-right` property defines the right margin of the scroll snap area that is used for snapping this box to the [snapport](/en-US/docs/Glossary/Scroll_container#snapport). The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
 
 {{EmbedInteractiveExample("pages/css/scroll-margin-right.html")}}
 

files/en-us/web/css/scroll-margin-top/index.md

@@ -7,7 +7,7 @@ browser-compat: css.properties.scroll-margin-top
 
 {{CSSRef}}
 
-The `scroll-margin-top` property defines the top margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+The `scroll-margin-top` property defines the top margin of the scroll snap area that is used for snapping this box to the [snapport](/en-US/docs/Glossary/Scroll_container#snapport). The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
 
 {{EmbedInteractiveExample("pages/css/scroll-margin-top.html")}}
 

files/en-us/web/css/scroll-margin/index.md

@@ -42,7 +42,7 @@ scroll-margin: unset;
 
 ## Description
 
-You can see the effect of `scroll-margin` by scrolling to a point partway between two of the "pages" of the example's content. The value specified for `scroll-margin` determines how much of the page that's primarily outside the snapport should remain visible.
+You can see the effect of `scroll-margin` by scrolling to a point partway between two of the "pages" of the example's content. The value specified for `scroll-margin` determines how much of the page that's primarily outside the [snapport](/en-US/docs/Glossary/Scroll_container#snapport) should remain visible.
 
 Thus, the `scroll-margin` values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
 

files/en-us/web/css/scroll-snap-align/index.md

@@ -7,7 +7,7 @@ browser-compat: css.properties.scroll-snap-align
 
 {{CSSRef}}
 
-The `scroll-snap-align` property specifies the box's snap position as an alignment of its snap area (as the alignment subject) within its snap container's snap port (as the alignment container).
+The `scroll-snap-align` property specifies the box's snap position as an alignment of its [snap area](/en-US/docs/Glossary/Scroll_container#snap_area) (as the alignment subject) within its snap container's snap port (as the alignment container).
 
 {{EmbedInteractiveExample("pages/css/scroll-snap-align.html")}}
 
@@ -40,7 +40,7 @@ One or two values can be specified for the `scroll-snap-align` property. If one
 - `none`
   - : The box does not define a snap position in that axis.
 - `start`
-  - : The start alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis.
+  - : The start alignment of this box's scroll [snap area](/en-US/docs/Glossary/Scroll_container#snap_area), within the scroll container's [snapport](/en-US/docs/Glossary/Scroll_container#snapport) is a snap position in this axis.
 - `end`
   - : The end alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis.
 - `center`