R Shiny应用中如何让tags$div构建的标题栏延伸至屏幕边缘消除间隙

问题根源 #

白色间隙由两个未被覆盖的默认样式导致：

• fluidPage生成的.container-fluid容器默认带有15px的左右内边距，同时页面body元素默认自带8px的外边距
• h3标签（对应#apptitle）默认带有上下外边距，会额外撑开标题栏的上下间隙

修复代码 #

你只需要在现有样式规则中补充3处配置即可，完整可运行代码如下：

library(shiny)
ui <- fluidPage(
  tags$div(
    id = 'titlebar',
    ## App title
    HTML('<h3 id="apptitle"><span>SD Card Processing App</span></h3>')
  ), # div
  tags$style('
    /* 清除页面默认边距 */
    body, .container-fluid {
      margin: 0;
      padding: 0;
    }
    #titlebar {
      position: relative;
      margin: 0px;
      padding: 0px;
      background-color: #3c8dbc;
      height: 80px;
    }

    #apptitle {
      position: relative;
      top: 30px;
      left: 130px;
      color: white;
      /* 清除h3默认外边距 */
      margin: 0;
    }

    #apptitle span {
      background-color: #367fa9;
      padding-top: 28px;
      padding-bottom: 24px;
      padding-right: 20px;
      padding-left: 20px;
    }
  ')
) # fluidPage
server <- function(input, output, session) {
}

shinyApp(ui, server)

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