Layout stack

The eds-l-stack component creates consistent vertical spacing between block level elements. It removes child margins and applies a uniform gap, based on the Every Layout Stack.

Use it to avoid margin collapse issues and keep vertical rhythm predictable across your user interface.

Demo

<div class="eds-l-stack" style="--eds-l-stack--gap: 1.5rem;">
    <div>
        <p>First paragraph with content.</p>
    </div>
    <div>
        <p>Second paragraph with content.</p>
    </div>
    <div>
        <p>Third paragraph with content.</p>
    </div>
</div>

When to use this component

Use this component when you need to:

• add consistent vertical spacing between elements
• avoid margin related spacing issues
• build reusable layouts that stack content vertically
• change spacing without editing individual child components
• structure cards, articles, form sections or similar vertical flows

When not to use this component

Do not use this component when:

• you need horizontal layouts, use eds-l-cluster instead
• you’re building complex grid patterns, use eds-l-grid instead
• elements require different spacing from one another

Installation

@import '@springernature/elements/components/eds-l-stack';

Usage

Default spacing

By default, an element with class="eds-l-stack" applies a gap of 1.5em between sibling elements. All child margins are removed, preventing margin collapse and double spacing issues.

<div class="eds-l-stack">
	<h2>Heading</h2>
	<p>First paragraph with content.</p>
	<p>Second paragraph with content.</p>
	<blockquote>A quotation</blockquote>
</div>

Custom spacing

Set a different gap using the --eds-l-stack--gap custom CSS property:

<div class="eds-l-stack" style="--eds-l-stack--gap: 2rem">
	<h2>Heading</h2>
	<p>Paragraph with larger spacing.</p>
	<p>Another paragraph.</p>
</div>

You can also apply tighter spacing:

<div class="eds-l-stack" style="--eds-l-stack--gap: 0.75rem">
	<h2>Heading</h2>
	<p>Paragraph with larger spacing.</p>
	<p>Another paragraph.</p>
</div>

Nesting stacks

You can nest stacks to create different spacing levels:

<div class="eds-l-stack" style="--eds-l-stack--gap: 2rem">
	<section>
		<h2>Main section</h2>
		<div class="eds-l-stack" style="--eds-l-stack--gap: 0.5rem">
			<p>Tightly spaced content</p>
			<p>within this section</p>
			<p>all together</p>
		</div>
	</section>
	<section>
		<h2>Another section</h2>
		<p>Loosely spaced content</p>
	</section>
</div>

Browser support

This component uses progressive enhancement:

Modern browsers (Chrome, Firefox, Safari, Edge) use Flexbox with the gap property for precise control.

Core browser fallback uses margin-top on child elements for consistent spacing.

The fallback margin approach ensures vertical spacing works universally, while modern browsers benefit from the more robust gap property that prevents margin collapse.

CSS custom properties

Help improve this page

If you have a question, idea, or suggestion to improve this component or guidance, post in the Ask Elements Teams channel.