How can I reduce the space between ggplot2 figures and subsequent text in revealjs slides?

[jtr13]

Description

Inspecting figures in my reveal slides shows that the css controling the spacing is:

.quarto-figure {
    position: relative;
    margin-bottom: 1em;
}

I have tried many different options to change margin-bottom to 0 such as adding the following to my custom .scss file:

.reveal .slides .quarto-figure {
  position: relative;
  margin-bottom: 0em; !important
}

and nothing works. (It does work when I manually change it in Chrome tools.) Any tips?

[cscheid]

and nothing works. (It does work when I manually change it in Chrome tools.) Any tips?

That probably means there's some other rule that's taking over. Can you provide a reprex?

[jtr13]

In my efforts to produce a reprex I figured out that the problem was caused by auto-stretch: false interacting with other elements, likely figure sizing or out.width though I haven't been able to pinpoint exactly what combination results in additional vertical space after a plot. Clearly though something is going on with auto-stretch: false as it wraps the plots in multiple additional tags:

Example with auto-stretch: false

format: 
  revealjs:
    auto-stretch: false
---

## auto-stretch: false

```{r}
library(ggplot2)
ggplot(mtcars, aes(wt, mpg)) + geom_point() + theme_grey(16)
```

This is a line of text below the plot.

Example with auto-stretch: true

---
format: 
  revealjs:
    auto-stretch: true
---

## auto-stretch: true

```{r}
library(ggplot2)
ggplot(mtcars, aes(wt, mpg)) + geom_point() + theme_grey(16)
```

This is a line of text below the plot.

So, in short, I will stop using auto-stretch: false to avoid this issue.

[mcanouil]

Using the inspect/developer mode show what is adding the margins.

You only have to overwrite that rule, either in a CSS file via the css key, via SCSS using theme or via include-in-header.

---
format: 
  revealjs:
    auto-stretch: false
    include-in-header:
      - text: |
          <style>
            .reveal p > img {
              margin: 0;
            }
          </style>
---

## auto-stretch: true

```{r}
plot(1)
```

This is a line of text below the plot.

[jtr13]

This is really helpful, thanks a lot!