R Markdown add White Space to HTML Output

Question

I've found several suggestions for adding whitespace to R Markdown documents including <br>, \newpage and some other things.

These don't work for my HTML output, maybe there's a better way. I'd like to do two things in the example below:

(1) Add extra whitespace between the title and the first header

(2) Add extra whitespace between the first and second paragraphs

Let's go with the default R Markdown document shown below. How would I accomplish this extra white space for HTML output?

---
title: "Here is the title"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## R Markdown

FIRST PARAGRAPH This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

SECOND PARAGRAPH you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:

Hernando · Answer 1 · 2019-04-26T20:43:42.027

16

A simple solution to add a line of white space is to use $~$

This adds a line of white space and has worked reliably for me with html output.

# R Markdown

Some text

$~$

More text after a white space

edited Apr 26 '19 at 20:43

answered Mar 07 '19 at 17:41

Hernando

169
1
3

Please try adding a line break before and after the $~$. Note: edited above to reflect this. – Hernando Apr 26 '19 at 20:44
adding a line break before and after didn't change anything – see24 Apr 30 '19 at 15:59
Not sure why it's not working for you. Here's another reference to this solution: https://stackoverflow.com/questions/20543454/create-two-blank-lines-in-markdown – Hernando May 01 '19 at 16:06
nice! Even works today in Word as well as HTML... if I switch to Word, still produces whitespace and not those characters :) – Mike M Aug 20 '20 at 03:54

score 13 · Answer 2 · answered Mar 03 '18 at 23:10

Since the question is about styling an html_document, you have to use some CSS rules. There are many means to obtain the desired formatting.

In order to find a set of CSS rules that achieve your goal, it is necessary to inspect the rendered HTML document. Here's the relevant HTML fragment of the default R Markdown document provided in the question:

<div class="fluid-row" id="header">
  <h1 class="title toc-ignore">Here is the title</h1>
</div>

<div id="r-markdown" class="section level2">
  <h2>R Markdown</h2>
  <p>FIRST PARAGRAPH This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <a href="http://rmarkdown.rstudio.com" class="uri">http://rmarkdown.rstudio.com</a>.</p>
  <p>SECOND PARAGRAPH you click the <strong>Knit</strong> button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:</p>
</div>

Here is one solution that uses the margin property and the :first-of-type pseudo-class:

---
title: "Here is the title"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{css echo=FALSE}
/* Define a margin before h2 element */
h2  {
  margin-top: 6em;
}

/* Define a margin after every first p elements */
p:first-of-type {
  margin-bottom: 3em;
}
``` 

## R Markdown

FIRST PARAGRAPH This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

SECOND PARAGRAPH you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:

If you use these CSS rules in your final document, you may be disappointed because you'll get a space before each h2 element and after each first p element. So, you may prefer selecting elements with the div identifier:

```{css echo=FALSE}
#r-markdown  {
  margin-top: 6em;
}

#r-markdown p:first-of-type {
  margin-bottom: 3em;
}
```

score 6 · Accepted Answer · edited Mar 06 '18 at 11:19

Use div elements to divide sections within your R Markdown file. Inside each div tag, assign each margin-bottom property a margin value. Values closer to 100% increase the amount of white space.

Thank you for @Martin Schmelzer answer to the SO post Rmarkdown html whitespace.

---
title: "Here is the title"
output: html_document
---
<div style="margin-bottom:100px;">
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
</div>
## R Markdown
<div style="margin-bottom:50px;">
</div>
FIRST PARAGRAPH This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

SECOND PARAGRAPH you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:

R Markdown add White Space to HTML Output

3 Answers3