lecture.studio

Marp text align, margins and scoped styles for one slide

By Ekrem Çetinkaya · Published

Alignment and spacing in Marp are CSS, not Markdown: section { text-align: center; } centres a slide, section { padding: 60px; } sets the margin around the content, and img { margin: 0 24px; } spaces figures. To change one slide only, put the rules in a <style scoped> block on that slide — Marp rewrites the selectors so they apply to that slide and no other.

This guide covers alignment, padding and image spacing, the scoped block, and CSS variables for values you reuse.

Align text

section { text-align: center; }          /* whole deck, in the theme */
section h1, section h2 { text-align: left; }

For one slide, a class is the tidiest route. Most themes ship a lead class that centres everything:

<!-- _class: lead -->

# Week 5

Scheduling

For anything else, write the class in your theme and use it the same way; see themes for lectures and the title slide guide.

Vertical position is not text-align at all. The built-in themes do not make a slide a flex container, so the rule that moves content down the slide is:

section { display: flex; flex-direction: column; justify-content: center; }  /* or flex-end */

Gaia's own lead class centres its content without your adding that, which is why <!-- _class: lead --> is the shortest route to a centred title slide.

Padding and the content area

padding on section is the slide's margin — the white space between the edge and the content:

section { padding: 70px 80px; }

The default themes use a comfortable value for a 16:9 slide. Reduce it when a slide is dense, raise it when a projector crops the edges; some rooms lose 2–3% on every side, and a wider padding is the cheapest insurance for a page number or a footer near the bottom.

Image margins and spacing

Images sit inline, so spacing is margin:

section img { margin: 0 auto; display: block; }   /* centre every figure */
section p:has(> img) { text-align: center; }      /* centre the line it is on */

For two images side by side, the spacing comes from the container rather than the images themselves — a flex row with gap — which is the two-column layout. Marp's own keywords cover sizing without CSS (![w:400](fig.png)), and background images take bg left:40%. There is no center keyword: Marp keeps the word in the rendered alt, so ![w:400 center](fig.png) centres only once the theme carries img[alt~="center"] { display: block; margin: 0 auto; }. See centring images and text.

One slide only: scoped styles

<!-- _class: dense -->

<style scoped>
section { font-size: 24px; padding: 40px; }
table { font-size: 18px; }
</style>

## Marking scheme

| Item | Weight |
|:-----|-------:|

<style scoped> is Marpit's, not browser CSS. The rendered output gets a generated attribute — section[data-marpit-scope-ZPgZoDca] — on every selector in the block, so the rules reach that slide and nothing else. It is the right tool for a one-off: a table that needs to be smaller, a slide with more text than usual, a dark slide in a light deck.

Rules that belong to more than one slide belong in the theme instead. A deck with a scoped block on every third slide is a theme waiting to be written.

CSS variables

Variables declared on section work normally and are the tidiest way to keep a colour in one place:

/* @theme cs101 */
@import 'default';

section {
  --accent: #2563eb;
  --muted:  #6b7280;
}
section h2 { color: var(--accent); }
section footer { color: var(--muted); }

They can be overridden per slide from a scoped block (<style scoped>section { --accent: tomato; }</style>), which changes every rule that reads the variable — a whole section of the course in a different accent colour, without a second theme. The theme builder generates a theme with this shape if you would rather pick the values in a form.

What not to use

Inline style attributes are stripped by Marp's sanitiser: <div style="text-align:center"> renders as a plain div. A class on a div survives, so the pattern is a class in the theme (or a scoped block) plus <div class="…"> in the Markdown. The full list of what survives is in video, iframes and SVG.

FAQ

How do I centre text in Marp?

section { text-align: center; } in the theme for the whole deck, <!-- _class: lead --> for one slide with most themes, or a <style scoped> block for a one-off.

How do I change the margin around a Marp slide?

Set padding on section — for example section { padding: 70px 80px; }. That is the space between the slide edge and the content.

How do I style a single slide in Marp?

Put the rules in <style scoped> on that slide. Marpit scopes every selector to that slide automatically.

Do CSS variables work in Marp themes?

Yes. Declare them on section and read them with var(); a scoped block can override them for one slide.

More guides