How to adjust line spacing in R Shiny?-CodePudding

I'm trying to adjust the gap between lines in an actionButton() rendered in a Shiny App, as illustrated below and per the MWE code at the bottom. How can the line spacing be adjusted?

Only for this action button and not throughout the entire App. I am not very familiar with HTML or CSS but if I recall there is a way to apply HTML/CSS formats to either all objects in an App or only to specified objects in the App: I am interested in applying this only to specified objects.

MWE code:

library(shiny)

ui <- fluidPage(
  br(),
  actionButton(
    "add",
    HTML("Add <br/> column"), 
    width = '80px',
    style='padding:0px; font-size:100%')
  )

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

shinyApp(ui, server)

CodePudding user response：

You can override the default line-height css rules from shiny.

actionButton(
    "add",
    HTML("Add <br/> column"), 
    width = '80px',
    style='padding:0px; font-size:100%; line-height:1;') // notice addition of 'line-height:1;'
  )

/*this is default styling aplied by shiny*/

button {
  color: #333;
  background-color: #fff;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  -webkit-appearance: button;
  text-transform: none;
}

<button width="80px" style='padding:0px; font-size:100%; line-height:1;'>
 Add <br/> column
</button>