Reducing space between shiny dashboard elements contained in a box - r

Question

In the app below, I wrap two plots in a box function to add borders around them to visually distinguish one from the other. However, when doing this, I get an unnecessary amount of whitespace between my input selector and the plots. Can anyone tell me how I can reduce this space. I'm guessing that the solution is using css but I couldn't figure out how to implement it correctly:
Edit: Any potential solutions, just wanted to clarify that the two smaller boxes must exist within the bigger 'Statistics' box.
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(tidyverse)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
fluidRow(
box(title = "Statistics", width = 12, collapsible = T,
sliderInput("numSelect", "Select Value", min = 1, max = 10, value = 5, width = "25%"),
fluidRow(
column(width = 6, box(width = NULL, plotOutput("cars1"))),
column(width = 6, box(width = NULL, plotOutput("cars2"))))
)
)
)
)
server <- function(input, output) {
output$cars1 <- renderPlot(
mtcars %>%
sample_n(input$numSelect) %>%
ggplot(aes(x = mpg, y = hp)) +
geom_point()
)
output$cars2 <- renderPlot(
mtcars %>%
sample_n(input$numSelect) %>%
ggplot(aes(x = mpg, y = hp)) +
geom_point()
)
}
shinyApp(ui, server)

Answer 1

There are many ways to add CSS to your app, but if you only want to affect one single element you can pass the CSS in the argument style that is possible for most of the Shiny functions. In your case you can add the style margin-top to the fluidRow to move the two plots 20 pixels up. The function will looks like this:
fluidRow(style = "margin-top: -20px;",
You can change the value that best fits your needs.