doc(api): IntersectionObserver rootMargin option value (mdn#40516)

* update rootMargin option

* Fix others

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

Author: ShubhamOulkar

files/en-us/web/api/intersection_observer_api/index.md

@@ -63,7 +63,7 @@ The `options` object passed into the {{domxref("IntersectionObserver.Intersectio
 - `root`
   - : The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. Defaults to the browser viewport if not specified or if `null`.
 - `rootMargin`
-  - : Margin around the root. A string of one to four values similar to the CSS {{cssxref("margin")}} property, e.g., `"10px 20px 30px 40px"` (top, right, bottom, left). The values can only be [absolute lengths](/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units#absolute_length_units) or percentages. This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. Negative values will shrink the bounding box of the root element and positive values will expand it. The default value, if not specified, is `"0px 0px 0px 0px"`.
+  - : Margin around the root. A string of one to four values similar to the CSS {{cssxref("margin")}} property, e.g., `"10px 20px 30px 40px"` (top, right, bottom, left). The values can only be in pixels (`px`) or percentages (`%`). This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. Negative values will shrink the bounding box of the root element and positive values will expand it. The default value, if not specified, is `"0px 0px 0px 0px"`.
 - `scrollMargin`
   - : Margin around nested {{glossary("scroll container","scroll containers")}} that takes the same values/has same default as `rootMargin`.
     The margins are applied to nested scrollable containers before computing intersections.
@@ -155,7 +155,7 @@ The **_root intersection rectangle_** is the rectangle used to check against the
 - If the intersection root has an overflow clip, the root intersection rectangle is the root element's content area.
 - Otherwise, the root intersection rectangle is the intersection root's bounding client rectangle (as returned by calling {{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}} on it).
 
-The root intersection rectangle can be adjusted further by setting the **root margin**, `rootMargin`, when creating the {{domxref("IntersectionObserver")}}. The values in `rootMargin` define offsets added to each side of the intersection root's bounding box to create the final intersection root bounds (which are disclosed in {{domxref("IntersectionObserverEntry.rootBounds")}} when the callback is executed). Positive values grow the box, while negative values shrink it.
+The root intersection rectangle can be adjusted further by setting the **root margin**, `rootMargin`, when creating the {{domxref("IntersectionObserver")}}. The values in `rootMargin` define offsets added to each side of the intersection root's bounding box to create the final intersection root bounds (which are disclosed in {{domxref("IntersectionObserverEntry.rootBounds")}} when the callback is executed). Positive values grow the box, while negative values shrink it. Each offset value can be only expressed in pixels (px) or a percentage (%).
 
 The effect of growing the box using the root margin is to allow overflow targets to intersect with the root before they become visible.
 This can be used, for example, to start loading images just before they come into view, rather than at the point they become visible.

files/en-us/web/api/intersectionobserver/index.md

@@ -23,7 +23,7 @@ When an `IntersectionObserver` is created, it's configured to watch for given ra
 - {{domxref("IntersectionObserver.root")}} {{ReadOnlyInline}}
   - : The {{domxref("Element")}} or {{domxref("Document")}} whose bounds are used as the bounding box when testing for intersection. If no `root` value was passed to the constructor or its value is `null`, the top-level document's viewport is used.
 - {{domxref("IntersectionObserver.rootMargin")}} {{ReadOnlyInline}}
-  - : An offset rectangle applied to the root's {{Glossary('bounding box')}} when calculating intersections, effectively shrinking or growing the root for calculation purposes. The value returned by this property may not be the same as the one specified when calling the constructor as it may be changed to match internal requirements. Each offset can be expressed in pixels (`px`) or as a percentage (`%`). The default is "0px 0px 0px 0px".
+  - : An offset rectangle applied to the root's {{Glossary('bounding box')}} when calculating intersections, effectively shrinking or growing the root for calculation purposes. The value returned by this property may not be the same as the one specified when calling the constructor as it may be changed to match internal requirements. Each offset can be expressed in pixels (`px`) or percentages (`%`). The default is "0px 0px 0px 0px".
 - {{domxref("IntersectionObserver.scrollMargin")}} {{ReadOnlyInline}}
   - : An offset rectangle applied to each {{glossary("scroll container")}} on the path from intersection root to target, effectively shrinking or growing the clip rectangles used to calculate intersections.
     The value returned by this property may not be the same as the one specified when calling the constructor.

files/en-us/web/api/intersectionobserver/intersectionobserver/index.md

@@ -50,14 +50,14 @@ new IntersectionObserver(callback, options)
         viewport as the root, with no margin, and a 0% threshold (meaning that even a one-pixel change is enough to trigger a callback).
     - `rootMargin`
       - : A string which specifies a set of offsets to add to the root's {{Glossary('bounding_box')}} when calculating intersections, effectively shrinking
-        or growing the root for calculation purposes.
+        or growing the root for calculation purposes. Each offset value can be only expressed in pixels (`px`) or percentages (`%`).
         The syntax is approximately the same as that for the CSS {{cssxref("margin")}} property;
         see [The intersection root and root margin](/en-US/docs/Web/API/Intersection_Observer_API#the_intersection_root_and_root_margin) for more information on how the margin works and the syntax.
         The default is "0px 0px 0px 0px".
     - `scrollMargin`
       - : A string that specifies the offsets to add to every {{glossary("scroll container")}} on path to the target when calculating intersections, effectively shrinking or growing the clip rectangles used to calculate intersections.
         This allows, for example, better observation of targets inside nested scroll containers that are currently clipped away by the scroll containers.
-        The syntax is approximately the same as that for the CSS {{cssxref("margin")}} property.
+        The syntax is the same as `rootMargin`.
         The default is "0px 0px 0px 0px".
     - `threshold`
       - : Either a single number or an array of numbers between 0.0 and 1.0, specifying a ratio of intersection area to total bounding box area for the observed target.

files/en-us/web/api/intersectionobserver/rootmargin/index.md

@@ -21,7 +21,7 @@ A string, formatted similarly to the CSS {{cssxref("margin")}} property's value,
 These offsets are added to the corresponding values in the root's bounding box before the intersection between the resulting rectangle and the target element's bounds.
 
 The string returned by this property may not match the one specified when the {{domxref("IntersectionObserver")}} was instantiated.
-The browser is permitted to alter the values
+For example, the result always contains four components, though the input may have fewer.
 
 If `rootMargin` isn't specified when the object was instantiated, it defaults to the string `"0px 0px 0px 0px"`, meaning that the intersection will be computed between the root element's unmodified bounds rectangle and the target's bounds.
 [How intersections are calculated](/en-US/docs/Web/API/Intersection_Observer_API#how_intersection_is_calculated) describes how the `rootMargin` is used in more detail.