quarto-dev / quarto-dev/quarto-cli
Change "padding" to "margin" in CSS rule for callouts (+copy-button side-effect)
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
I have:
- searched the issue tracker for similar issues
- installed the latest version of Quarto CLI
- formatted my issue following the Bug Reports guide
Bug description
padding adds internal space which lead to extend the child rather than adding spacing with the callout header.
This is visually not great when the first child of a callout-body is a code-block which has a background, because no extra spaces is added as the background is extended.
With the changes made for the copy-button as an extra div is inserted the issue moved a bit but still leads to a weird output.
Several rules might need tweaks to fix the outside/inside spacing.
Initially found by @georgestagg
Steps to reproduce
---
format: html
---
# Testing
:::: { .callout-note}
:::: {style="background-color: #b22222; height: 100px;"}
:::
:::
Actual behavior
Expected behavior
---
format: html
include-in-header:
- text: |
<style>
.callout.callout-style-default .callout-body>:first-child {
padding-top: 0; /* default was 0.5rem */
margin-top: 0.5rem; /* default was 0 */
}
</style>
---
# Testing
:::: { .callout-note}
:::: {style="background-color: #b22222; height: 100px;"}
:::
:::
Your environment
No response
Quarto check output
Quarto 99.9.9
[✓] Checking environment information...
Quarto cache location: /Users/mcanouil/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.6.3: OK
Dart Sass version 1.87.0: OK
Deno version 2.3.1: OK
Typst version 0.13.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 99.9.9
commit: 908cde52ce560b4e48f85f4003c48a20bcbd3caa
Path: /Users/mcanouil/Projects/quarto-dev/quarto-cli/package/dist/bin
[✓] Checking tools....................OK
TinyTeX: v2025.08.02
Chromium: (not installed)
[✓] Checking LaTeX....................OK
Using: TinyTex
Path: /Users/mcanouil/Library/TinyTeX/bin/universal-darwin
Version: 2025
[✓] Checking Chrome Headless....................OK
Using: Chrome found on system
Path: /Applications/Brave Browser.app/Contents/MacOS/Brave Browser
Source: QUARTO_CHROMIUM
[✓] Checking basic markdown render....OK
[✓] Checking Python 3 installation....OK
Version: 3.13.2
Path: /Users/mcanouil/Projects/quarto-dev/quarto-playground/.venv/bin/python3
Jupyter: 5.8.1
Kernels: julia-1.11, uv, python3
[✓] Checking Jupyter engine render....OK
(-) Checking R installation...........ℹ R version 4.5.1 (2025-06-13)
! Config '~/.Rprofile' was loaded!
[✓] Checking R installation...........OK
Version: 4.5.1
Path: /Library/Frameworks/R.framework/Resources
LibPaths:
- /Users/mcanouil/Projects/quarto-dev/quarto-playground/renv/library/macos/R-4.5/aarch64-apple-darwin20
- /Users/mcanouil/Library/Caches/org.R-project.R/R/renv/sandbox/macos/R-4.5/aarch64-apple-darwin20/4cd76b74
knitr: 1.50
rmarkdown: 2.29
[✓] Checking Knitr engine render......OK
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with src/resources/formats/html/bootstrap/_bootstrap-rules.scss at the callout-body rules linked in the issue, then render the provided Quarto Markdown reproduction. Adjust the callout spacing so the first child gets external top space without extending its background, and verify the result also looks correct when the copy-button wrapper is present.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- scss
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100