fix demo hydration mismatch

Author: yyx990803

src/.vitepress/theme/styles/inline-demo.css

@@ -1,9 +1,9 @@
 .demo {
-  /* background-color: var(--vt-c-bg-soft); */
   transition: border-color 0.5s;
   padding: 22px 24px;
   border-radius: 8px;
   border: 1px solid var(--vt-c-divider-light);
+  margin-bottom: 1.2em;
 }
 
 .demo p {
@@ -21,4 +21,4 @@
 
 .demo button + button {
   margin-left: 1em;
-}
+}

src/guide/essentials/template-syntax.md

@@ -29,10 +29,10 @@ The double mustaches interprets the data as plain text, not HTML. In order to ou
   const rawHtml = '<span style="color: red">This should be red.</span>'
 </script>
 
-<p class="demo">
+<div class="demo">
   <p>Using text interpolation: {{ rawHtml }}</p>
   <p>Using v-html directive: <span v-html="rawHtml"></span></p>
-</p>
+</div>
 
 The contents of the `span` will be replaced with the value of the `rawHtml` property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use `v-html` to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.
 

src/guide/introduction.md

@@ -39,12 +39,12 @@ import { ref } from 'vue'
 const count = ref(0)
 </script>
 
-<p class="demo">
+<div class="demo">
   <button @click="count++">
     Clicked {{ count }} time{{ count === 1 ? '' : 's' }}.
   </button>
   <button @click="count = 0">Reset</button>
-</p>
+</div>
 
 The above example demonstrates the two core features of Vue: