ioslides_presentation中Leaflet图层切换框留白过多，如何在R文档中添加CSS？

一、添加CSS的位置 #

在你的R Markdown（.Rmd）文档中，有两种常用方式添加自定义CSS：

1. 通过YAML配置引用外部CSS文件 #

在文档最顶部的YAML区域，添加css参数指定外部CSS文件路径：

---
title: "你的演示文稿标题"
output:
  ioslides_presentation:
    css: custom.css
---

2. 直接在文档内嵌入CSS代码 #

在YAML配置之后，添加HTML样式块或R代码块嵌入样式：

• HTML样式块方式：

<style>
/* 自定义CSS代码写在这里 */
</style>

• R代码块方式（需加载htmltools包）：

```{r echo=FALSE, message=FALSE}
library(htmltools)
includeCSS("custom.css")

## 二、针对性CSS代码
针对Leaflet图层切换框的多余空白问题，添加以下CSS规则缩小框体：
```css
/* 限制图层列表高度，超出时显示滚动条 */
.leaflet-control-layers-list {
  max-height: 200px;
  overflow-y: auto;
}

/* 减少控件内边距，压缩整体尺寸 */
.leaflet-control-layers {
  padding: 6px 8px;
  box-sizing: border-box;
}

/* 缩小选择框与文字的间距 */
.leaflet-control-layers-selector {
  margin-top: 2px;
}

/* 缩小行间距，减少垂直空白 */
.leaflet-control-layers label {
  margin-bottom: 3px;
}

三、使用步骤 #

1. 若用外部CSS文件，将上述代码保存为custom.css，放在.Rmd文档同一目录下
2. 若用嵌入方式，把CSS代码写入对应的<style>标签或外部文件
3. 重新渲染ioslides演示文稿，即可看到图层切换框的多余空白被消除

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