How to control padding for value boxes created with bslib - css

Question

I thought I could set a class for the value box to remove padding like this:
bslib::value_box("test", "test", class = "p-0")
Or in a minimal Shiny app:
library(shiny)
ui <- fluidPage(
theme = bslib::bs_theme(version = 5),
bslib::value_box("test", "test", class = "p-0")
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
But if I do that, it removes only the padding for the bootstrap card:
I want to remove all the blue padding around the content, including the bootstrap card body.
The problem appears to be that bslib::value_box() function wraps content with bslib::card_body_fill(), and it doesn't look like there is a way to pass arguments through to card_body_fill().
I can go into developer tools and search for "padding" and accomplish this:
Or I can add some CSS:
.card-body {
padding: 0;
}
But this will change the padding for all elements with class card_body. What if I want to target only a few value boxes?

Answer 1

Add a class (suppose nopad) to value_boxes for which you want to remove the padding of the content. Using developer tools, you would see that value_box contents are wrapped within a div with class .value-box-area. So Change the padding for css selector div.nopad .value-box-area.
library(shiny)
ui <- fluidPage(
theme = bslib::bs_theme(version = 5),
# css styles -------------------------------------------
tags$head(
# Note the wrapping of the string in HTML()
tags$style(HTML("
div.nopad .value-box-area {
padding: 0;
}
"))
),
# ------------------------------------------------------
bslib::value_box("test", "test", class = "p-0 nopad"), # with class nopad
bslib::value_box("test", "test", class = "p-0")
)
server <- function(input, output, session) {
}
shinyApp(ui, server)