Skip to content

Change "padding" to "margin" in CSS rule for callouts #13238

@mcanouil

Description

@mcanouil

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    calloutsIssues with Callout Blocks.enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions