如何控制bs4Dash中box()组件内部的空白区域

bs4Dash的box组件内容区域默认带有内边距，这就是标题边框和表格之间出现多余空白的原因。你可以通过添加自定义CSS来覆盖这个默认样式，让表格贴近标题边框。

修改后的完整代码如下：

library(shiny)
library(bs4Dash)
library(gt)
library(tidyverse)

ui <- dashboardPage(
  title = "Example",
  header = dashboardHeader(title = "Example"),
  sidebar = dashboardSidebar(
    sidebarMenu(
      menuItem(
        "Page 1",
        tabName = "example_page",
        icon = icon("e")
      )
  )),
  body = dashboardBody(
    # 添加自定义CSS调整box内边距
    tags$style(HTML("
      .box-body {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        /* 如果需要左右也贴近，可加上 padding-left: 0 !important; padding-right: 0 !important; */
      }
    ")),
    tabItems(
      tabItem(
        tabName = "example_page",
        fluidRow(
          sortable(
            width = 7,
            box(title = "Example box",
                headerBorder = T,
                gt_output("gt_example"),
                width = 12,
                height = 200)
          )
        )
      )
    )
  )
)

server <- function(input, output, session) {
  output$gt_example <- render_gt({
    mpg |> head(2) |> gt()
  })
}

shinyApp(ui, server)

说明 #

• 这段CSS针对.box-body类修改了上下内边距为0，!important用于强制覆盖默认样式，确保生效。
• 如果需要表格左右也贴近box边缘，可以取消注释CSS里的左右内边距设置。
• 你也可以根据需求调整具体数值，比如设置padding-top: 5px !important;来保留少量空白。

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