如何移除Shiny应用中信息图上下的多余灰色空白

要消除iframe上下的多余空白，核心是移除UI组件的默认样式、优化iframe属性设置，具体修改如下：

• 去掉多余的导航栏结构：原代码里的navbarPage自带默认上下内边距，你这里不需要导航栏功能，直接把htmlOutput放在fluidPage下即可减少层级带来的留白。
• 优化iframe的样式属性：
  • 添加frameborder="0"去除iframe自带的边框
  • 用allowtransparency="true"替代已废弃的seamless属性，让iframe背景和Shiny页面保持一致
  • 通过style设置margin:0; padding:0; display:block;，消除iframe自身的边距和默认行内元素空隙
• 清除fluidPage默认内边距：设置fluidPage(padding = 0)，去掉页面整体的默认留白

修改后的完整代码：

library(shiny)
library(shinydashboard)

ui = fluidPage(
  padding = 0,  # 清除fluidPage默认内边距
  htmlOutput("infographic")
)

server <- function(input,output){
  output$infographic <- renderUI({
    tags$iframe(
      src= "Hub_Infographic.html",
      width=1080, 
      height=1024,
      frameborder="0",  # 去掉iframe边框
      allowtransparency="true",  # 允许背景透明
      style="margin:0; padding:0; display:block;"  # 消除边距，块级展示
    )
  })
}

shinyApp(ui, server)

如果调整后仍有细微空白，检查你的Hub_Infographic.html文件，若body设置了margin或padding，在HTML的样式中添加以下代码即可：

body {
  margin: 0;
  padding: 0;
}

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