使用navbarPage与leaflet的Shiny应用地图边缘出现空白边距问题

更新！ #

原问题已解决，目前遇到了新的问题，我已调整标题体现当前问题。

问题描述 #

我的应用中地图可以正常显示，但存在无法消除的白色边距，上、左、右边界的红线标注位置如下：

我的代码大量参考了无同类问题的官方示例，示例效果如下：

问题代码 #

# 全局配置 ----
library(leaflet)
library(shiny)

# UI配置 ----
ui <- navbarPage(
  title = '示例', 
  tabPanel("地图", leafletOutput('map', width = '100%', height = '90vh'))
)

# 服务端配置 ----
server <- function(input, output) {
  
  output$map <- renderLeaflet({
    leaflet() %>%
      setView(-51.4, -32.6, zoom = 6) %>% 
      addTiles(group = "开放街道地图")
  })
}

# 运行应用 ----
shinyApp(ui = ui, server = server)

运行环境信息 #

R版本 3.6.3 (2020-02-29)
运行平台: x86_64-pc-linux-gnu (64位)
操作系统: Ubuntu 18.04.5 LTS

矩阵运算库:
BLAS:   /usr/lib/x86_64-linux-gnu/blas/libblas.so.3.7.1
LAPACK: /usr/lib/x86_64-linux-gnu/lapack/liblapack.so.3.7.1

区域配置:
 [1] LC_CTYPE=en_US.UTF-8       LC_NUMERIC=C               LC_TIME=es_UY.UTF-8       
 [4] LC_COLLATE=en_US.UTF-8     LC_MONETARY=es_UY.UTF-8    LC_MESSAGES=en_US.UTF-8   
 [7] LC_PAPER=es_UY.UTF-8       LC_NAME=C                  LC_ADDRESS=C              
[10] LC_TELEPHONE=C             LC_MEASUREMENT=es_UY.UTF-8 LC_IDENTIFICATION=C        

基础安装包:
[1] stats     graphics  grDevices utils     datasets  methods   base     

第三方安装包:
[1] shiny_1.5.0   leaflet_2.0.3

依赖加载包:
 [1] Rcpp_1.0.5        digest_0.6.25     later_1.1.0.1     mime_0.9          R6_2.4.1         
 [6] jsonlite_1.7.0    xtable_1.8-4      magrittr_1.5      rlang_0.4.11      promises_1.1.1   
[11] tools_3.6.3       htmlwidgets_1.5.1 crosstalk_1.1.0.1 rsconnect_0.8.16  fastmap_1.0.1    
[16] httpuv_1.5.4      yaml_2.2.1        compiler_3.6.3    htmltools_0.5.0  

解决方案 #

白边是Shiny的tab面板默认自带内边距、地图组件默认有外边距导致的，只需在UI代码中添加两行行内CSS即可完全消除，修改后的完整代码如下：

# 全局配置 ----
library(leaflet)
library(shiny)

# UI配置 ----
ui <- navbarPage(
  title = '示例', 
  tabPanel("地图", 
           # 移除tab内容容器默认内边距
           tags$style(type = "text/css", ".tab-content {padding: 0 !important;}"),
           # 移除地图组件默认边距
           tags$style(type = "text/css", "#map {margin: 0 !important; padding: 0 !important;}"),
           leafletOutput('map', width = '100%', height = '90vh'))
)

# 服务端配置 ----
server <- function(input, output) {
  
  output$map <- renderLeaflet({
    leaflet() %>%
      setView(-51.4, -32.6, zoom = 6) %>% 
      addTiles(group = "开放街道地图")
  })
}

# 运行应用 ----
shinyApp(ui = ui, server = server)

修改后运行即可看到白边完全消失，地图会铺满整个tab面板区域。

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