diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/index.md index 99b443fc02..a5583f9eaa 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/index.md +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/index.md @@ -2,7 +2,7 @@ title: Dimensions --- -You can add `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings to any element: +You can add `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings to any element, and Svelte will update the bound values using a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver): ```svelte /// file: App.svelte @@ -13,3 +13,5 @@ You can add `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bind ``` These bindings are readonly — changing the values of `w` and `h` won't have any effect on the element. + +> [!NOTE] `display: inline` elements do not have a width or height (except for elements with 'intrinsic' dimensions, like `` and ``), and cannot be observed with a `ResizeObserver`. You will need to change the `display` style of these elements to something else, such as `inline-block`.