.sl-markdown-content adds unnecessary margin

[zkmark]

What version of starlight are you using?

0.21.2

What version of astro are you using?

4.3.5

What package manager are you using?

npm

What operating system are you using?

Windows

What browser are you using?

Chrome

Describe the Bug

Unnecessary margin is being added to all elements I want to document except the first element

.sl-markdown-content :not(a, strong, em, del, span, input, code) + :not(a, strong, em, del, span, input, code, :where(.not-content *)){
      margin-top: 1rem;
}

Try to fix it by changing the margin to 0, but now classes like tailwind's mt-4 don't work

.sl-markdown-content :not(a, strong, em, del, span, input, code) + :not(a, strong, em, del, span, input, code, :where(.not-content *) ){
   margin-top: 0;
}

Link to Minimal Reproducible Example

https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics?file=src%2Fcontent%2Fdocs%2Fcomponents%2Fbuttons.mdx

Participation

• [ ] I am willing to submit a pull request for this issue.

[HiDeoo]

Thanks for your report.

Starlight applies default styling to all content, for example the margin you mentioned. If these styles conflict with your content’s appearance, you can use the not-content class on your content to disable these styles.

For example, with the following code:

<div class="buttons">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
</div>

The following content is rendered with the top margin clearly visible:

Updating the code to the following will remove the margin:

<div class="buttons not-content">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
</div>

[delucis]

Thank you for the issue @zkmark! We intentionally apply those margins to space elements inside page content. We try to apply this in a way that is resilient to different kinds of content, but inevitably there are some cases where the margins don’t make sense.

As @HiDeoo shared, the not-content class is designed exactly for this situation.

[usrme]

I'm running into the same issue, but with Markdown codeblocks. I upgraded from 0.11.1 to 0.23.1, which at the time didn't rely on Expressive Code. Here's an image of what it looks like:

The exact same CSS rule is being triggered for each of the lines in the code. Disabling line numbers has no effect.

[HiDeoo]

I'm running into the same issue, but with Markdown codeblocks. I upgraded from 0.11.1 to 0.23.1, which at the time didn't rely on Expressive Code. Here's an image of what it looks like:

Do you happen to have astro-expressive-code in your astro.config.mjs file integrations list? If so, you should be able to remove it entirely as Expressive Code is now part of Starlight and have the issue fixed.

[usrme]

Right you are and removing that fixed it, but if I still want to configure Expressive Code for the Astro website that I have under the same astro.config.mjs? Removing that broke styling on my main page. If it's of any help, then my site is here.