Adjust line spacing in R Shiny: a step-by-step guide

Question

I'm trying to adjust the gap between rows in an actionButton() rendered in a Shiny app as shown below and based on the MWE code at the bottom. How to adjust line spacing?

Applies only to this action button, not to the entire application. I'm not very familiar with HTML or CSS, but if I remember there is a way to apply HTML/CSS formatting to all objects in the application or only to specified objects in the application: I'm interested in applying it to only the specified object.

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)

P粉237125700 · Answer

You can override shiny's default line-height css rules.

actionButton(
    "add",
    HTML("Add 
 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;
}