如何修改xaringan的CSS以减少代码输入与输出的垂直间距？

Got it, let's tackle that orange vertical spacing between your code input and output blocks in xaringan. The issue is likely that you weren't targeting the right CSS selectors for input vs. output code blocks—let's break this down step by step.

Step 1: Add Custom CSS to Your Slide Deck #

You can either add a <style> block directly in your Rmd file (right after the YAML header) or link to a separate CSS file. Here's the direct approach, which is easiest for quick tweaks:

<style>
/* Reduce bottom margin of code input blocks */
.remark-code {
  margin-bottom: 0.3em !important; /* Adjust this value to your preference */
}

/* Reduce top margin of code output blocks */
.remark-output .remark-code {
  margin-top: 0.3em !important;
}

/* If the orange gap is from the output container itself, add this */
.remark-output {
  margin-top: 0.3em !important;
}
</style>

Why This Works #

• By default, xaringan's code input blocks (pre.remark-code) have a larger margin-bottom, and output blocks (nested inside .remark-output) have a default margin-top. Targeting these specific selectors lets you shrink those spaces precisely.
• The !important flag ensures your custom styles override xaringan's default CSS (since some default styles have higher specificity).

Example Integration in Your Template #

Here's how to drop this into your existing xaringan Rmd:

---
title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
institute: "RStudio, Inc."
date: "2016/12/12 (updated: `r Sys.Date()`)"
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

<style>
/* Adjust code input/output vertical spacing */
.remark-code {
  margin-bottom: 0.3em !important;
}
.remark-output .remark-code {
  margin-top: 0.3em !important;
}
.remark-output {
  margin-top: 0.3em !important;
}
</style>

background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg)
```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)

??? Image credit: Wikimedia Commons #

class: center, middle

/ʃaː.'riŋ.ɡan/ #

class: inverse, center, middle

1 + 1

mtcars |> head()

### Tweaking the Spacing
Play around with the `0.3em` value—smaller numbers mean tighter spacing, larger numbers mean more space. Start with `0.2em` or `0.3em` and adjust until the orange gap looks right in Safari.

内容的提问来源于stack exchange，提问作者Florian Oswald