.sl-markdown-content adds unnecessary margin about starlight

[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.