如何用CSS在Quarto Reveal.js中实现列间无背景空白效果？

你之前用空白列的方式虽然可行，但确实可以通过CSS更简洁实现。问题出在Reveal.js的.columns容器默认采用Flex布局，你之前写的column-gap是针对CSS多列文本布局的属性，对Flex容器不生效，所以没达到预期效果。

正确的CSS修改方式 #

把.columns的column-gap换成Flex布局专属的gap属性即可，同时建议移除Quarto代码里的内联样式，统一用SCSS控制样式优先级：

修改你的theme.scss：

/* theme.scss */

/*-- scss:defaults --*/
$theme-Black: #000000;
$theme-White: #FFFFFF;

/*-- scss:rules --*/
.columns {
  gap: 20px; /* Flex布局下的列间距，可直接生效 */
}

.column {
  background-color: $theme-White;
  box-sizing: border-box;
  border-radius: 20px;
  padding: 1rem; /* 可选：给列内添加内边距，避免内容紧贴边框 */
}

对应的Quarto代码（移除内联样式） #

## text

:::: {.columns}
::: {.column width="45%"}
* Point 1
* Point 2
* Point 3
:::

::: {.column width="45%" }
* Point 1
* Point 2
* Point 3
:::
::::

补充说明 #

Reveal.js对Quarto的.columns容器默认设置了display: flex，此时需要用Flex布局的gap属性控制子列间距；而column-gap是给column-count这类流式多列文本布局设计的属性，和Flex布局不属于同一体系，所以之前的设置无效。

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