add space between R code blocks and text in bookdown for html output

Question

I am trying to add some space between text and code blocks in the HTML output of a book created with bookdown. I added the following to p.caption in the style.css file, and it adds space after figure captions.

p.caption {
  color: #777;
  margin-top: 10px;
  padding: 0px 0px 40px 0px;
}

Now I'd like to add space before figures included via:

knitr::include_graphics(rep("images/knit-logo.png", 3))

and before/after all code blocks.

Answer 1

Figures generated by bookdown are wrapped in a <div> with the class figure, so you can define margins for div.figure, e.g.

.figure {
  margin-top: 40px;
}

You can style other elements in a similar way. If you are not sure about the HTML element name/class, you can right click on an element and inspect it, e.g. in Google Chrome