Add whitespace between figures and paragraph text in html

[ericpgreen]

Could someone help me with the CSS to add vertical whitespace between figures and text? I'm not sure it matters, but this would need to apply to figures created by code blocks as well as figures inserted via pathways to files.

[mcanouil]

There are many many ways to do what you want, below is one on a per code cell basis:

---
format: html
include-in-header: 
  - text: |
      <style>.plot-padding { padding: 3em 0 3em 0; }</style
---

Some text

```{r}
#| label: fig-one
#| fig-cap: Caption
#| echo: false
#| classes: plot-padding
plot(1)
```

Some text

Another for all "figures" (the ones with labels and captions) in a document:

---
format: html
include-in-header: 
  - text: |
      <style>figure { padding: 3em 0 3em 0; }</style
---

Some text

```{r}
#| label: fig-one
#| fig-cap: Caption
#| echo: false
plot(1)
```

Some text

[mcanouil]

First, did you succeed to use my example and get the proper result?

Second, do you have a public repository to share? Without your whole setup, I can't really provide more help.

[ericpgreen]

Yes, thanks, I tried adding directly to the css file. That made the most sense to me.

Yes, here is my book repo: https://github.com/ericpgreen/ghr_ebook

Thanks for asking.

[mcanouil]

You had a typo in the css.
I also made other changes which seemed appropriate, see https://github.com/ericpgreen/ghr_ebook/pull/1.

[ericpgreen]

I feel like "You had a typo in the css" would sell some t-shirts 😆

Thank you for taking the time to explain my options and then for going into the repo to help me implement (and do some general house cleaning!!)

[mcanouil]

You are welcome.

If you are happy with the answer, please mark it to let others know your question has an answer. 😉