Search code examples
rrstudioquartoreveal.js

Add space between columns in Quarto (reveal.js) presentation


I am creating Quarto slides and use a two-column layout to compare code segments. However, I want to add some space between the columns, especially for longer code lines. As a workaround, I've added a third column in the middle, but I would prefer a more elegant css solution

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

## Two columns without space

::: {.column width="49%"}
```{r, echo=TRUE}
x <- runif(100)
plot(x)
```
:::

::: {.column width="49%"}
```{r, echo=TRUE}
x <- rnorm(100)
plot(x)
```
:::

## Two columns with space

::: {.column width="44%"}
```{r, echo=TRUE}
x <- runif(100)
plot(x)
```
:::

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

::: {.column width="44%"}
```{r, echo=TRUE}
x <- rnorm(100)
plot(x)
```
:::

two columns with space


Solution

  • You can add the space with an additional css class (the trick is to create the columns such that that both do not cover 100%):

    ---
    title: "Test"
    format: revealjs
    ---
    
    <style>
    .add-space{
    padding-right: 11%;
    }
    </style>
    
    
    ## Two columns without space
    
    ::: {.column width="44%" .add-space}
    ```{r, echo=TRUE}
    x <- runif(100)
    plot(x)
    ```
    :::
    
    ::: {.column width="44%"}
    ```{r, echo=TRUE}
    x <- rnorm(100)
    plot(x)
    ```
    :::