diff --git a/.changeset/tasty-spies-sniff.md b/.changeset/tasty-spies-sniff.md
new file mode 100644
index 0000000000..73583cf183
--- /dev/null
+++ b/.changeset/tasty-spies-sniff.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+breaking: use <span> instead of <div> for style props
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index 4463b5a1d0..c8e1467e96 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -362,7 +362,7 @@ export function build_component(node, component_name, context, anchor = context.
 		context.state.template.push(
 			context.state.metadata.namespace === 'svg'
 				? '<g><!></g>'
-				: '<div style="display: contents"><!></div>'
+				: '<span style="display: contents"><!></span>'
 		);
 
 		statements.push(
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index 5d0355b043..8e264e746b 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -186,7 +186,7 @@ export function css_props(payload, is_html, props, component, dynamic = false) {
 	const styles = style_object_to_string(props);
 
 	if (is_html) {
-		payload.out += `<div style="display: contents; ${styles}">`;
+		payload.out += `<span style="display: contents; ${styles}">`;
 	} else {
 		payload.out += `<g style="${styles}">`;
 	}
@@ -198,7 +198,7 @@ export function css_props(payload, is_html, props, component, dynamic = false) {
 	component();
 
 	if (is_html) {
-		payload.out += `<!----></div>`;
+		payload.out += `<!----></span>`;
 	} else {
 		payload.out += `<!----></g>`;
 	}
diff --git a/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties-dynamic/_config.js b/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties-dynamic/_config.js
index c636a3aca5..7c5765babd 100644
--- a/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties-dynamic/_config.js
+++ b/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties-dynamic/_config.js
@@ -8,18 +8,18 @@ export default test({
 		trackColor2: 'blue'
 	},
 	html: `
-		<div style="display: contents; --rail-color: black; --track-color: red;">
+		<span style="display: contents; --rail-color: black; --track-color: red;">
 			<div id="slider-1">
 				<p class="svelte-17ay6rc">Slider</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
-		</div>
-		<div style="display: contents; --rail-color: green; --track-color: blue;">
+		</span>
+		<span style="display: contents; --rail-color: green; --track-color: blue;">
 			<div id="slider-2">
 				<p class="svelte-17ay6rc">Slider</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
-		</div>
+		</span>
 	`,
 	test({ component, assert, target }) {
 		component.railColor1 = 'yellow';
@@ -28,18 +28,18 @@ export default test({
 		assert.htmlEqual(
 			target.innerHTML,
 			`
-			<div style="display: contents; --rail-color: yellow; --track-color: red;">
+			<span style="display: contents; --rail-color: yellow; --track-color: red;">
 				<div id="slider-1">
 					<p class="svelte-17ay6rc">Slider</p>
 					<span class="svelte-17ay6rc">Track</span>
 				</div>
-			</div>
-			<div style="display: contents; --rail-color: green; --track-color: orange;">
+			</span>
+			<span style="display: contents; --rail-color: green; --track-color: orange;">
 				<div id="slider-2">
 					<p class="svelte-17ay6rc">Slider</p>
 					<span class="svelte-17ay6rc">Track</span>
 				</div>
-			</div>
+			</span>
 		`
 		);
 	}
diff --git a/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties/_config.js b/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties/_config.js
index 25de6b18f9..afb54c880a 100644
--- a/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties/_config.js
+++ b/packages/svelte/tests/runtime-browser/samples/component-css-custom-properties/_config.js
@@ -2,18 +2,18 @@ import { test, assert_ok } from '../../assert';
 
 export default test({
 	html: `
-		<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
+		<span style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
 			<div id="slider-1">
 				<p class="svelte-17ay6rc">Slider</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
-		</div>
-		<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
+		</span>
+		<span style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
 			<div id="slider-2">
 				<p class="svelte-17ay6rc">Slider</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
-		</div>
+		</span>
 	`,
 	test({ target, window, assert }) {
 		const rail_color1 = target.querySelector('#slider-1 p');
diff --git a/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties-dynamic/_config.js b/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties-dynamic/_config.js
index c636a3aca5..7c5765babd 100644
--- a/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties-dynamic/_config.js
+++ b/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties-dynamic/_config.js
@@ -8,18 +8,18 @@ export default test({
 		trackColor2: 'blue'
 	},
 	html: `
-		<div style="display: contents; --rail-color: black; --track-color: red;">
+		<span style="display: contents; --rail-color: black; --track-color: red;">
 			<div id="slider-1">
 				<p class="svelte-17ay6rc">Slider</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
-		</div>
-		<div style="display: contents; --rail-color: green; --track-color: blue;">
+		</span>
+		<span style="display: contents; --rail-color: green; --track-color: blue;">
 			<div id="slider-2">
 				<p class="svelte-17ay6rc">Slider</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
-		</div>
+		</span>
 	`,
 	test({ component, assert, target }) {
 		component.railColor1 = 'yellow';
@@ -28,18 +28,18 @@ export default test({
 		assert.htmlEqual(
 			target.innerHTML,
 			`
-			<div style="display: contents; --rail-color: yellow; --track-color: red;">
+			<span style="display: contents; --rail-color: yellow; --track-color: red;">
 				<div id="slider-1">
 					<p class="svelte-17ay6rc">Slider</p>
 					<span class="svelte-17ay6rc">Track</span>
 				</div>
-			</div>
-			<div style="display: contents; --rail-color: green; --track-color: orange;">
+			</span>
+			<span style="display: contents; --rail-color: green; --track-color: orange;">
 				<div id="slider-2">
 					<p class="svelte-17ay6rc">Slider</p>
 					<span class="svelte-17ay6rc">Track</span>
 				</div>
-			</div>
+			</span>
 		`
 		);
 	}
diff --git a/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties/_config.js b/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties/_config.js
index 4f82db0a05..f2260fd035 100644
--- a/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties/_config.js
+++ b/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties/_config.js
@@ -5,18 +5,18 @@ export default test({
 		componentName: /** @type {string | undefined} */ ('Slider1')
 	},
 	html: `
-		<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
+		<span style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
 			<div id="component1">
 				<p class="svelte-17ay6rc">Slider1</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
-		</div>
-		<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
+		</span>
+		<span style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
 			<div id="component2">
 				<p class="svelte-17ay6rc">Slider1</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
-		</div>
+		</span>
 	`,
 	test({ target, window, assert, component }) {
 		function assert_slider_1() {
diff --git a/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties2/_config.js b/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties2/_config.js
index 09f725bb3d..9c6124c57b 100644
--- a/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties2/_config.js
+++ b/packages/svelte/tests/runtime-browser/samples/svelte-component-css-custom-properties2/_config.js
@@ -6,18 +6,18 @@ export default test({
 	},
 	html: `
 		<section>
-			<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
+			<span style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
 				<div id="component1">
 					<p class="svelte-17ay6rc">Slider1</p>
 					<span class="svelte-17ay6rc">Track</span>
 				</div>
-			</div>
-			<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
+			</span>
+			<span style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
 				<div id="component2">
 					<p class="svelte-17ay6rc">Slider1</p>
 					<span class="svelte-17ay6rc">Track</span>
 				</div>
-			</div>
+			</span>
 		</section>
 	`,
 	test({ target, window, assert, component }) {
diff --git a/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties-dynamic/_config.js b/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties-dynamic/_config.js
index a3079df1d8..058ebaa3f5 100644
--- a/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties-dynamic/_config.js
+++ b/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties-dynamic/_config.js
@@ -12,30 +12,30 @@ export default test({
 		nestTrackColor2: 'pink'
 	},
 	html: `
-		<div style="display: contents; --rail-color: black; --track-color: red;">
+		<span style="display: contents; --rail-color: black; --track-color: red;">
 			<div id="slider-1">
 				<p class="svelte-17ay6rc">Slider</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
-			<div style="display: contents; --rail-color: white; --track-color: gray;">
+			<span style="display: contents; --rail-color: white; --track-color: gray;">
 				<div id="nest-slider-1">
 					<p class="svelte-17ay6rc">Slider</p>
 					<span class="svelte-17ay6rc">Track</span>
 				</div>
-			</div>
-		</div>
-		<div style="display: contents; --rail-color: green; --track-color: blue;">
+			</span>
+		</span>
+		<span style="display: contents; --rail-color: green; --track-color: blue;">
 			<div id="slider-2">
 				<p class="svelte-17ay6rc">Slider</p>
 				<span class="svelte-17ay6rc">Track</span>
 			</div>
-			<div style="display: contents; --rail-color: aqua; --track-color: pink;">
+			<span style="display: contents; --rail-color: aqua; --track-color: pink;">
 				<div id="nest-slider-2">
 					<p class="svelte-17ay6rc">Slider</p>
 					<span class="svelte-17ay6rc">Track</span>
 				</div>
-			</div>
-		</div>
+			</span>
+		</span>
 	`,
 	test({ component, assert, target }) {
 		component.railColor1 = 'yellow';
@@ -46,30 +46,30 @@ export default test({
 		assert.htmlEqual(
 			target.innerHTML,
 			`
-			<div style="display: contents; --rail-color:yellow; --track-color:red;">
+			<span style="display: contents; --rail-color:yellow; --track-color:red;">
 				<div id="slider-1">
 					<p class="svelte-17ay6rc">Slider</p>
 					<span class="svelte-17ay6rc">Track</span>
 				</div>
-				<div style="display: contents; --rail-color:lime; --track-color:gray;">
+				<span style="display: contents; --rail-color:lime; --track-color:gray;">
 					<div id="nest-slider-1">
 						<p class="svelte-17ay6rc">Slider</p>
 						<span class="svelte-17ay6rc">Track</span>
 					</div>
-				</div>
-			</div>
-			<div style="display: contents; --rail-color:green; --track-color:orange;">
+				</span>
+			</span>
+			<span style="display: contents; --rail-color:green; --track-color:orange;">
 				<div id="slider-2">
 					<p class="svelte-17ay6rc">Slider</p>
 					<span class="svelte-17ay6rc">Track</span>
 				</div>
-				<div style="display: contents; --rail-color:aqua; --track-color:gold;">
+				<span style="display: contents; --rail-color:aqua; --track-color:gold;">
 					<div id="nest-slider-2">
 						<p class="svelte-17ay6rc">Slider</p>
 						<span class="svelte-17ay6rc">Track</span>
 					</div>
-				</div>
-			</div>
+				</span>
+			</span>
 		`
 		);
 	}
diff --git a/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties/_config.js b/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties/_config.js
index 673a14a6a8..daaaa98e54 100644
--- a/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties/_config.js
+++ b/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties/_config.js
@@ -3,25 +3,26 @@ import { assert_ok, test } from '../../assert';
 export default test({
 	props: {},
 	html: `
-		<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
+		<span style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
 			<div id="component1">
 				<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
 			</div>
-			<div style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
+			<span style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
 				<div id="nest-component1">
 					<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span></div>
 				</div>
-			</div>
-		<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
+			</span>
+		</span>
+		<span style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
 			<div id="component2">
 				<p class="svelte-q538ga">Slider2</p><span class="svelte-q538ga">Track</span>
 			</div>
-			<div style="display: contents; --rail-color: rgb(0, 255, 255); --track-color: rgb(255, 255, 255);">
+			<span style="display: contents; --rail-color: rgb(0, 255, 255); --track-color: rgb(255, 255, 255);">
 				<div id="nest-component2">
 					<p class="svelte-q538ga">Slider2</p><span class="svelte-q538ga">Track</span>
 				</div>
-			</div>
-		</div>
+			</span>
+		</span>
 	`,
 	test({ target, window, assert }) {
 		const rail_color1 = target.querySelector('#component1 p');
diff --git a/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties2/_config.js b/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties2/_config.js
index a7d8c1bc38..501336eb32 100644
--- a/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties2/_config.js
+++ b/packages/svelte/tests/runtime-browser/samples/svelte-self-css-custom-properties2/_config.js
@@ -5,25 +5,26 @@ export default test({
 		componentName: /** @type {string | undefined} */ ('Slider1')
 	},
 	html: `
-		<div style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
+		<span style="display: contents; --rail-color: rgb(0, 0, 0); --track-color: rgb(255, 0, 0);">
 			<div id="component1">
 				<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
 			</div>
-			<div style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
+			<span style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
 				<div id="nest-component1">
 					<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span></div>
 				</div>
-			</div>
-		<div style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
+			</span>
+		</span>
+		<span style="display: contents; --rail-color: rgb(0, 255, 0); --track-color: rgb(0, 0, 255);">
 			<div id="component2">
 				<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
 			</div>
-			<div style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
+			<span style="display: contents; --rail-color: rgb(255, 255, 0); --track-color: rgb(255, 0, 255);">
 				<div id="nest-component2">
 					<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
 				</div>
-			</div>
-		</div>
+			</span>
+		</span>
 	`,
 	test({ target, window, assert, component }) {
 		function assert_slider_1() {
diff --git a/packages/svelte/tests/runtime-legacy/samples/css-vars-escape/_config.js b/packages/svelte/tests/runtime-legacy/samples/css-vars-escape/_config.js
index 71d240eb4d..729d36dbea 100644
--- a/packages/svelte/tests/runtime-legacy/samples/css-vars-escape/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/css-vars-escape/_config.js
@@ -2,8 +2,8 @@ import { test } from '../../test';
 
 export default test({
 	html: `
-		<div style="display: contents; --color: &quot; onload=&quot;alert('uhoh')&quot; data-nothing=&quot;not important;">
+		<span style="display: contents; --color: &quot; onload=&quot;alert('uhoh')&quot; data-nothing=&quot;not important;">
 			<div class="svelte-271qee">hi</div>
-		</div>
+		</span>
 	`
 });
diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
index ec1dfaeb34..fe2081558e 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
@@ -429,4 +429,8 @@ Svelte 5 makes use of comments during server side rendering which are used for m
 
 Event attributes replace event directives: Instead of `on:click={handler}` you write `onclick={handler}`. For backwards compatibility the `on:event` syntax is still supported and behaves the same as in Svelte 4. Some of the `onevent` attributes however are delegated, which means you need to take care to not stop event propagation on those manually, as they then might never reach the listener for this event type at the root.
 
+### `--style-props` uses a different element
+
+Svelte 5 uses an extra `<span>` element instead of a `<div>` to wrap the component when using CSS custom properties.
+
 <!-- TODO in final docs, add link to corresponding section for more details -->