How to add margin spacing between source code blocks?

[mattwarkentin]

Description

Hi,

I am having some issues coming up with the right CSS/SCSS to add margin spacing to the bottom of code blocks in a Reveal presentation. Any idea what I'm doing wrong? This is the default spacing has all of the code blocks touching.

When I add the following code to my SCSS theme it doesn't achieve what I was hoping. I've played around with other iterations but no luck. Just trying to create spacing (i.e., whitespace) between the divs.

.sourceCode {
  margin-bottom: 20px;
}

[mcanouil]

Please share code, not screenshots. Thank you.

Use your favourite browser inspect/developper mode to target the right element.
There are plenty of examples of this process.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

![A placeholder image](https://placehold.co/600x400.png)

The end.
````

[mattwarkentin]

My issue has crept up in an RevealJS presentation, but it generally applies to all HTML formats.

---
title: "Presentation"
format: revealjs
---

```{r eval=FALSE, echo=TRUE}
plot(cars)
```
```{r eval=FALSE, echo=TRUE}
plot(cars)
```

[mcanouil]

As I said, the answer can easily be found using your browser.

Note that Quarto recommends and uses YAML style for the option, not the R inline style.

Screen.Recording.2024-01-02.at.21.06.15.mov

Details

---
title: "Presentation"
format: revealjs
execute:
  echo: true
  eval: false
include-in-header:
  text: |
    <style type="text/css">
    .reveal div.sourceCode {
      margin: 0 0 50px 0;
    }
    </style>
---

```{r}
plot(cars)
```

```{r}
plot(cars)
```