如何消除Quarto仪表盘标题栏与主体内容间的空白区域

我在创建Quarto仪表盘时，有时需要用css代码调整布局。在下面这个仪表盘示例中，我用CSS来调整数值框（valuebox）里的字体大小。但问题是，当我把CSS代码块放在文档顶部时，仪表盘的标题栏和主体内容之间会出现一块空白区域——即使我给CSS代码块加上了echo=FALSE参数，这个空白依然存在。

下面是可复现的代码：

---
title: "Gapminder"
author: "Quinten"
format: dashboard
theme: yeti
---

```{r}
#| warning: false
#| message: false
#| echo: false
library(tidyverse)
library(DT)
library(gapminder)
library(ggpmisc)
library(ggbump)
library(plotly)
library(leaflet)
library(countrycode)
library(sf)
library(rnaturalearth)
library(crosstalk)

.quarto-dashboard .bslib-value-box .value-box-value {
    font-size: clamp(.1em, 10cqw, 2em) !important;
}

# Calculate some values
# Average gdpPercap per year
mean_gdpPercap <- gapminder %>%
  group_by(year) %>%
  reframe(mean_gdpPercap = mean(gdpPercap)) %>%
  pull(mean_gdpPercap)

perc_growth_gdpPercap <- 100*((mean_gdpPercap[length(mean_gdpPercap)] - mean_gdpPercap[1])/mean_gdpPercap[1])

# Average lifeExp per year
mean_lifeExp <- gapminder %>%
  group_by(year) %>%
  reframe(mean_lifeExp = mean(lifeExp)) %>%
  pull(mean_lifeExp)

perc_growth_lifeExp <- 100*((mean_lifeExp[length(mean_lifeExp)] - mean_lifeExp[1])/mean_lifeExp[1])

# Create dataset for leaflet map
df <- gapminder %>% #filter(year == 2007) %>% 
  mutate(iso_a3 = countrycode(country, "country.name", "iso3c"), 
         gdpPercap = round(gdpPercap, 0), 
         lifeExp = round(lifeExp, 0))

world <- ne_countries(type = "countries",  returnclass = 'sf') %>% 
  left_join(., df, by = "iso_a3") %>% 
  filter(!is.na(country)) %>% 
  select("country", "continent" = "continent.y", "year", "lifeExp", "pop", "gdpPercap", "geometry") %>% 
  as('Spatial')

world_NA <- ne_countries(type = "countries",  returnclass = 'sf')

sd <-  SharedData$new(world)
sd_df <- SharedData$new(world@data, group = sd$groupName())

This is a static dashboard with some hover options to give you some insights of the Gapminder dataset. This dashboard is developed using Quarto v1.4.

Below you can select some settings to filter the map and table:

filter_select("year", "Choose the year:", sd_df, ~year)
filter_slider("lifeExp", "Life expectancy (years):", sd_df, ~lifeExp)
filter_slider("gdpPercap", "Income per person ($):", sd_df, ~gdpPercap)

::: {.callout-note collapse="true"}

Disclaimer #

This is just a simple static dashboard as demonstration to show what is possible with the latest version of Quarto.
:::

Row {height=20%} #

#| content: valuebox
#| title: "Percentage growth 1952-2007 of average lifeExp"
list(
  icon = "arrow-up",
  color = "green",
  value = paste0(round(perc_growth_lifeExp,1), "%")
)

#| content: valuebox
#| title: "Percentage growth 1952-2007 of average gdpPercap"
list(
  icon = "graph-up",
  color = "light",
  value = paste0(round(perc_growth_gdpPercap,1), "%")
)

Row {height=80%} #

Column {.tabset} #

#| title: "World map"
pal <- colorFactor(c("#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd"), domain = c("Africa", "Americas", "Asia", "Europe", "Oceania"), ordered = FALSE)

leaflet(sd) %>% 
  addProviderTiles("CartoDB.Positron") %>% 
  addPolygons(data = world_NA, color = "#969696", weight = 1, fillColor = "#808080") %>% 
  addPolygons(color = "#969696", weight = 2, fillColor = ~pal(continent), fillOpacity = 0.8)

#| title: "gdpPercap vs lifeExp"
gapminder %>%
  ggplot(aes(x = gdpPercap, y = lifeExp)) +
  geom_point() +
  geom_smooth(method = loess) +
  theme_minimal()

Column {.tabset} #

#| title: "Top 10 countries life expectancy per year"
df <- gapminder %>% 
  group_by(year) %>%
  arrange(desc(lifeExp)) %>% 
  slice(1:10) %>%
  mutate(rank = row_number()) %>%
  ungroup()

p <- ggplot(df, aes(year, rank, color = continent, group = country)) +
  geom_bump() +
  geom_point() +
  geom_text(data = df %>% filter(year == min(year)),
            aes(x = year - .1, label = country), size = 2, vjust = -1.5) +
  geom_text(data = df %>% filter(year == max(year)),
            aes(x = year + .1, label = country), size = 2, vjust = -1.5) +
  scale_x_continuous(breaks = c(unique(df$year))) +
  scale_y_continuous(breaks = c(1:10), trans = "reverse") +
  guides(x =  guide_axis(angle = 45)) +
  theme(panel.grid.major = element_blank(), 
        panel.grid.minor = element_blank(),
        panel.background = element_blank()) +
  labs(x = "Year", y = "Rank", color = "Continent") +
  coord_cartesian(clip = "off") 
p

#| title: "Average life expectancy per continent over time"
p <- gapminder %>%
  group_by(continent, year) %>%
  summarise(lifeExp=mean(lifeExp)) %>%
  ggplot(aes(x=year, y=lifeExp, color=continent)) +
  geom_line() + 
  geom_point() +
  theme_minimal()
plotly::ggplotly(p)

输出效果：

![Quarto仪表盘标题与主体间的空白区域](https://i.sstatic.net/vRCVk.jpg)

如图所示，仪表盘标题栏和主体内容之间有一块明显的空白区域。我尝试过一些移除空白的常规方法，但都没有效果。所以想问问有没有人知道为什么会出现这个问题，以及该怎么解决它？

备注：内容来源于stack exchange，提问作者Quinten