如何为Quarto（reveal.js）演示文稿的列添加间距

不用中间加空列的临时方法，直接通过自定义CSS就能给双栏之间添加合适的间距，以下是两种常用实现方式：

方法1：利用Flex布局的gap属性（推荐） #

这种方式最简洁，直接给双栏容器设置间距，无需调整列宽度：

---
title: "Test"
format: revealjs
---

<!-- 嵌入自定义CSS -->
::: {.style}
<style>
/* 给双栏容器设置列间距 */
.columns {
  gap: 2rem; /* 可根据需求调整间距大小，比如1.5rem、3rem */
}
/* 让两列自动平分空间（可选，也可以保留width设置） */
.columns .column {
  flex: 1;
}
</style>
:::

## 优化后的双栏布局
::: {.columns}
::: {.column}
```{r, echo=TRUE}
x <- runif(100)
plot(x)

:::

::: {.column}

x <- rnorm(100)
plot(x)

:::
:::

## 方法2：给单列设置右侧外边距
如果需要更精准控制某一列的间距，可给第一列添加右侧外边距：

```yaml
---
title: "Test"
format: revealjs
---

::: {.style}
<style>
/* 给第一列添加右侧间距 */
.columns .column:first-child {
  margin-right: 2rem;
}
</style>
:::

## 带间距的双栏布局
::: {.columns}
::: {.column width="49%"}
```{r, echo=TRUE}
x <- runif(100)
plot(x)

:::

::: {.column width="49%"}

x <- rnorm(100)
plot(x)

:::
:::

两种方案都能实现类似你当前临时方法的效果（如下所示），但无需额外添加空列，代码更简洁易维护：

![两列带间距效果](https://i.sstatic.net/zyAmt.png)

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