Flexdashboard：如何为第二行添加大标题及设置行间距？

解决方案 #

要实现你需要的两个效果，直接调整代码即可，以下是修改后的完整代码：

title: "Dashboard"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: scroll
    smooth_scroll: true
---
<br><br><br>


```{r setup, include=FALSE}
library(flexdashboard)
library(leaflet)

Row #

Articles per Day #

valueBox("5 articles", icon = "fa-pencil")

Comments per Day #

valueBox("10 comments", icon = "fa-comments")

Row #

Map

m <- leaflet() %>%
    addTiles() %>%  
    setView(lng=-77.030137, lat=38.902986, zoom = 16) %>%
    addMarkers(lng=-77.030137, lat=38.902986, popup="<b>Hello</b><br><a href='https://www.washingtonpost.com'>-Me</a>")

m 

#### 改动说明：
- **两行之间加间距**：在第一个Row区块结束后、第二个Row区块开始前，添加了`<div style="height: 40px;"></div>`，你可以根据需求调整`height`数值来控制间距大小，比单纯用`<br>`更灵活可控。
- **调整标题样式**：替换了原来的Markdown三级标题`### Map`，改用HTML的`<h2>`标签并设置内联样式——`font-size: 24px`控制字号，`font-weight: bold`设置加粗，`margin-top: 0`消除默认顶部间距，让标题布局更紧凑。

如果需要统一管理多个标题的样式，也可以添加全局CSS块：
在文档最开头添加如下代码，后续直接调用类名即可：
```css
<style>
.custom-title {
  font-size: 24px;
  font-weight: bold;
  margin-top: 0;
}
.row-spacing {
  height: 40px;
}
</style>

之后用<div class="row-spacing"></div>控制行间距，用<h2 class="custom-title">Map</h2>设置标题样式，方便后续统一修改。

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