Landmarks and section
Vertical spacing for body > header, main and footer, and for section.
On this page
Pico Reforged styles the three page landmarks that are direct children of body, plus section. Use real landmark elements: they help assistive technology and need no classes.
<header>
<h1>Site title</h1>
</header>
<main class="container">
<section>
<h2>First section</h2>
<p>Sections get a bottom margin so they stack with a steady rhythm.</p>
</section>
<section>
<h2>Second section</h2>
<p>More content.</p>
</section>
</main>
<footer>
<small>Footer text</small>
</footer>What is styled
| Selector | Style |
|---|---|
body | width: 100% and no margin |
main | display: block |
body > header, body > main, body > footer | padding-block: |
section | margin-bottom: |
Only direct children of body get the landmark padding. A header inside an article is a card header and is styled by the Card rules instead.
Accessibility
A header or footer that is a direct child of body is exposed as a banner or content info landmark. Keep one main per page and give each section a heading, or an aria-label, so it reads as a region.
Customization
The spacing comes from one variable. Change it on :root or on a single element:
:root {
--pico-block-spacing-vertical: 2rem;
}The variable can also grow with the viewport, see Responsive and fluid.
--pico-block-spacing-vertical- Vertical padding of landmarks and bottom margin of section.
--pico-spacing- Base spacing the block spacing is built from.