Astro循环渲染标题组件时单词无间距问题求助

我正在构建一个Title组件，接收text属性，通过text.split(" ")将文本拆分为单词数组，循环渲染到传入的标题标签中。但遇到问题：循环渲染时单词之间没有间距，手动逐个写入<div>标签时则有正常间距，且两种方式渲染出的DOM完全一致，不清楚是遗漏配置还是预期行为？

组件示例 #

<Title
    Tag="h2"
    text="This is an example"
/>

带循环的组件代码 #

---
interface Props {
    Tag: string
    text: string
    class?: string
    line?: boolean
    highlight?: number[]
}

const { Tag, text, class: className, line, highlight } = Astro.props

const splitTitle = text.split(" ")
---

<Tag class:list={["c-title", className]}>
    {splitTitle.map((word, index) => <div>{word}</div>)}
</Tag>

<style is:global lang="scss">
    .c-title {
        --title-color: var(--scheme-contrast);

        color: var(--title-color);

        div {
            display: inline-block;
        }
    }
</style>

渲染结果：Thisisanexample

手动编写的组件代码 #

---
interface Props {
    Tag: string
    text: string
    class?: string
    line?: boolean
    highlight?: number[]
}

const { Tag, text, class: className, line, highlight } = Astro.props

const splitTitle = text.split(" ")
---

<Tag class:list={["c-title", className]}>
    <div>This</div>
    <div>is</div>
    <div>an</div>
    <div>example</div>
</Tag>

<style is:global lang="scss">
    .c-title {
        --title-color: var(--scheme-contrast);

        color: var(--title-color);

        div {
            display: inline-block;
        }
    }
</style>

渲染结果：This is an example

原因 #

这是浏览器处理inline/inline-block元素的默认行为导致的：

• 手动编写<div>标签时，标签之间的换行、空格会被浏览器解析为单个空格字符，所以inline-block元素之间会有间距。
• 循环渲染生成的<div>是紧密排列的，没有额外的空白字符，源码里是连续的<div>This</div><div>is</div>结构，因此元素之间没有间距。

解决方案 #

有几种实用的解决方式：

1. 给元素添加右边距
   修改CSS，给.c-title下的div设置右边距，最后一个元素通过伪类去掉：

.c-title div {
    display: inline-block;
    margin-right: 0.5em; /* 可按需调整间距大小 */
}
.c-title div:last-child {
    margin-right: 0;
}

2. 循环时插入空格字符
   在map循环中，给每个单词（除了最后一个）后面添加空格：

<Tag class:list={["c-title", className]}>
    {splitTitle.map((word, index) => (
        <>
            <div>{word}</div>
            {index !== splitTitle.length - 1 && " "}
        </>
    ))}
</Tag>

3. 改用Flex布局
   把.c-title设为flex容器，用gap属性直接控制间距，更简洁：

.c-title {
    --title-color: var(--scheme-contrast);
    color: var(--title-color);
    display: flex;
    gap: 0.5em; /* 控制单词间距 */
}
/* 此时div无需设置inline-block，默认block即可 */

内容的提问来源于stack exchange，提问作者Bram Mortier