Fix #5594: Align pre element with baseline grid using nudge system

[Nayab-Gauhar]

Summary

This PR fixes issue #5594 by aligning the <pre> element with the baseline grid using the nudge system.

Changes

• Updated padding to use $spv-nudge for top padding and ($spv--small - $spv-nudge) for bottom padding
• Adjusted margin-bottom to $spv--x-large - $spv-nudge to compensate for the nudge value

What this fixes

The <pre> element was not properly aligned with the baseline grid because it wasn't using the nudge system that other text elements use. This fix applies the standard nudge pattern:

1. Adds nudge value to padding-top to shift content down
2. Compensates at padding-bottom to maintain total height
3. Adjusts margin-bottom to account for the nudge

QA

• Open any page with <pre> elements in the documentation
• Verify that the pre elements now align properly with the baseline grid
• Check that the visual appearance and spacing remains correct

Checklist

• PR should have the Bug 🐛 label
• Package version update (if needed for release)

[webteam-app]

Nayab-Gauhar is not a collaborator of the repo

[Copilot]

Pull Request Overview

This PR adjusts the spacing for code blocks by introducing nudge values to fine-tune the margins and padding. The changes modify the visual spacing around code elements to achieve more precise vertical alignment.

• Reduced bottom margin by subtracting a nudge value
• Modified padding to use asymmetric vertical values with nudge adjustments

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[jmuzina]

Deployed demo.

Here's an example pen that can has content immediately following a pre block that might be helpful in QA'ing this.

It appears the content after the pre is sitting a bit lower than the baseline. I'm not sure if that's owing to the padding (nudge) or margin bottom (spacing after) being off.

@lyubomir-popov or @dgtlntv , could you have a look and let us know what the desired spacing should be?

[dgtlntv]

@jmuzina It looks like thats due to the margin of the <pre> element being 2 pixels too large. Since the height of the element is divisible by the baseline the margin in this case must be divisible by the baseline as well. (If the element height would not be divisible by the baseline then the margin would need to account for it so element + margin is on the baseline again).