How to create spacing between tabsetpanel and graph in shiny?

Question

I used the tabsetpanel() function to create tabs for two different graphs. However, I'm running into the problem where the title of the graph is really close to the tabs and there isn't any spacing. It looks like it's squished together, so I'm wondering how I can create spacing between the tab panel and the graph? I have a shiny widget on the left side that is controlling the graph on the right side. Here is an example of my code:

tabPanel("Name",
   sidebarLayout(
     sidebarPanel(
       selectInput(
         <shiny widget coding is here>
       )
     ),
     mainPanel(
       tabsetPanel(
         tabPanel("graphname", plotlyOutput("graph1")),
         tabPanel("graphname2", plotlyOutput("graph2"))
       )
     )
   )
)

So as you can see there is the tabsetPanel and then the tabpanels that have the graph. But there's no spacing between the graphs and tabsetpanel bar, which looks like this:

How can I fix this?

Answer 1

Quick and dirty, using br() just before the plot. br() is a HTML-Linebreak:

library(shiny)    
library(plotly)
runApp(list(
  ui = fluidPage(tabPanel("Name",
                sidebarLayout(
                  sidebarPanel(

                  ),
                  mainPanel(
                    tabsetPanel(
                      tabPanel("graphname", br(), plotlyOutput("graph1")),
                      tabPanel("graphname2",  plotlyOutput("graph2"))
                    )
                  )
                )
  )),
  server = function(input, output) {
    output$graph1 <- renderPlotly({
      plot_ly(mtcars)%>% layout(title = "With Space")
    })

    output$graph2 <- renderPlotly({
      plot_ly(mtcars)%>% layout(title = "Without Space")
    })

  }
))

Answer 2

Put the graphs in a fluidRow and if that doesn't help. Add style = "padding-top:20px" as an argument to the fluidRow.