RMarkdown HTML xaringan - R code chunck titles

I am using RMarkdown and xaringan to create presentations (introduction to R).
I used CSS to edit the looks of the input and output R code chunks on the slides. In doing so, I added "Input" and "Output" titles to the corresponding R code boxes. Here's a MWE with the CSS code embedded in the .Rmd file:

---
title: "-"
output:
  xaringan::moon_reader:
    css: default
    seal: false
---

```{css, echo=FALSE}
.tiny {
  font-size: 75%;
}

/* Code line in both boxes */ 
.remark-code * {
 background: #f0f0f0;
}

/* Input box */ 
.hljs-default .hljs {
    padding:       20px;
    background:    #f0f0f0;
    border-radius: 10px;
}

/* Output box */ 
.remark-code {
  padding:       20px;
  background:    #f0f0f0;
  border-radius: 10px;
  display:       block;
}
```

.pull-left[
.tiny[*Input*]
```{r add, eval=FALSE}
2 + 3
```
]

.pull-right[
.tiny[*Output*]
```{r, ref.label="add", echo=FALSE}
```
]

And here's how it looks:

Not bad, except that I would like to remove the white space between the line with "Input" and "Output" and the top of each code box. How can I do this?

Thanks,
Bruce

OK, answering my own question, this CSS code worked for me:

.pull-left p {
  /*      top  right  bottom  left */
  margin: 0    0      0       0;
}

.pull-right p {
  /*      top  right  bottom  left */
  margin: 0    0      0       0;
}

.pull-left pre {
  /*      top  right  bottom  left */
  margin: 0    0      10px       0;
}

.pull-right pre {
  /*      top  right  bottom  left */
  margin: 0    0      10px       0;
}

The topic can be closed.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.