quarto-dev / quarto-dev/quarto-cli

Change "padding" to "margin" in CSS rule for callouts (+copy-button side-effect)

Open
#13,238 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

callouts enhancement
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.

Screenshot of Quarto 1.8 callout showing a copy-button above the actual code block

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
Screenshot showing no external spaces added above
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;"}
:::

:::
Screenshot showing the right external top spacing inside callout-body
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.