如何调整Shiny应用多余边距 消除视频两侧异常块

嵌入视频两侧出现垂直异常色块，由以下几个问题共同导致：

• Shiny框架的navbarPage布局默认给全局内容容器加了15px的左右内边距，设置的100%宽度深色背景容器位于该内边距内侧，左右两侧就会露出和深色背景不一致的异常区域
• 视频外层包裹div的高度属性存在笔误：315x是无效CSS值，浏览器无法正确解析容器高度
• 代码中写了冗余的相对/绝对定位、右偏移属性，加上固定尺寸的iframe没有做适配，进一步放大了显示错位问题

• 新增全局CSS规则，清除navbarPage默认的左右内边距，从根源消除两侧异常色块
• 修正高度笔误，将无效值315x改为标准CSS高度值315px
• 删除冗余的定位、偏移属性，避免元素错位
• 调整下方文字区的尺寸规则，把固定高度改为最小高度，补充上下内边距，避免长文本溢出和视频区重叠
• 给文字内容补充白色字体样式，适配深色背景

library(shiny)
library(shinythemes)

ui <- shiny::navbarPage(theme = shinytheme("flatly"),
                        title="Test", collapsible = TRUE,
                        # 清除页面默认左右内边距
                        tags$style(".container-fluid {padding:0 !important;}"),
                        
                        tabPanel("",
                                 icon = icon("home"),
                                 # 视频外层容器
                                 div(
                                   style = "height: 315px; margin:auto; background-color: #2C3E50; width: 100%;",
                                   tags$iframe(width="560", height="315", src="https://www.youtube.com/embed/T1-k7VYwsHg", 
                                               frameborder="0", allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture", 
                                               allowfullscreen=NA)
                                 ),
                                 style="text-align:center",
                                 
                                 # 下方文字内容区
                                 div(
                                   style = "min-height: 80px; background-color: #2C3E50; width: 100%;",
                                   div(
                                     style = "width: 80%; margin: auto; padding-top: 20px; padding-bottom: 40px;",
                                     
                                     h1(HTML("<u> WELCOME <b>NAME</b> </u>"),
                                        style="text-align:center; color: white;"),
                                     hr(),
                                     h4(HTML("Accumsan nostra eu sodales etiam interdum lacus nullam pretium congue, dolor phasellus tincidunt metus auctor scelerisque."),
                                        style="text-align: justify; color: white;"),
                                     br(),
                                     h4(HTML("Accumsan nostra eu sodales etiam interdum lacus nullam pretium congue, dolor phasellus tincidunt metus auctor scelerisque est at condimentum in, etiam nisi integer aliquet praesent dui pharetra morbi. suspendisse inceptos cras semper metus aliquam dapibus vulputate sollicitudin ante, purus libero cras sagittis nam lacus nunc nisi, convallis dolor tempus sociosqu rutrum ultrices ligula ante. turpis ornare purus donec sit ornare dictum himenaeos duis, eleifend gravida iaculis integer sodales maecenas proin tortor, augue ante iaculis mi etiam risus ligula. primis libero quisque curabitur vel vestibulum scelerisque tincidunt rhoncus a, phasellus nulla quisque tristique proin aliquam habitant aenean tempus rutrum, egestas pretium viverra vel nibh enim accumsan cras. Amet hac egestas duis aliquet, quisque dictumst taciti maecenas commodo, ultrices eu nam."),
                                        style="text-align: justify; color: white;"),
                                     br(), br(), 
                                     uiOutput("tab")
                                   )
                                 ),
                                 tags$style(".navbar {margin-bottom: 0;}")
                        )
)

server <- function(input, output,session) {
  
}

shinyApp(ui = ui, server = server)

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