# Heading Margins: Visual Guide to Proper Spacing

> A comprehensive demonstration of heading spacing for optimal readability

**Published by:** [Meesh @ Paragraph](https://paragraph.com/@meesh-paragaph/)
**Published on:** 2025-04-22
**URL:** https://paragraph.com/@meesh-paragaph/heading-margins-visual-guide-to-proper-spacing

## Content

This guide demonstrates the correct margin specifications between headings and various content elements. Each example shows the exact pixel measurements to maintain proper visual hierarchy and readability.Between Consecutive Headings: 32pxPrimary HeadingSecondary Heading (32px below Primary)Tertiary Heading (32px below Secondary)When headings appear consecutively without intervening content, maintain a 32px margin between them. This spacing preserves the hierarchical relationship while providing clear visual separation.Heading to Paragraph: 24pxHeading with Paragraph BelowThis paragraph appears 24px below the heading. The spacing is close enough to show the paragraph belongs to this heading, while still providing adequate separation for readability. The 24px space creates a natural visual connection without crowding the content.Paragraph to Heading: 40pxThis paragraph precedes a heading. When a heading follows a paragraph (or any content), we use a larger 40px margin to indicate the start of a new section or topic. This creates a stronger visual break in the content flow.New Section Heading (40px above)Heading to List: 24pxHeading with List BelowThis list appears 24px below the headingEach list item has 12px spacing between itemsThe heading-to-list spacing matches the heading-to-paragraph spacingThis creates consistency in the document's vertical rhythmList to Heading: 40pxThis is the final item in a list that precedes a headingWhen any content (including lists) comes before a headingWe use a 40px margin to create a clear section breakNew Section After List (40px above)Heading to Code Block: 24pxHeading with Code Belowjavascript// This code block appears 24px below the heading function calculateSpacing() { const baseUnit = 8; const headingToContent = baseUnit * 3; // 24px const contentToHeading = baseUnit * 5; // 40px return { headingToContent, contentToHeading }; }Code Block to Heading: 40pxcss/* This code block precedes a heading */ .heading-margins { margin-top: 40px; margin-bottom: 24px; }New Section After Code (40px above)Heading to Image: 24pxHeading with Image BelowImage caption - Note the 12px spacing between image and captionImage to Heading: 40pxImage caption - Note the 12px spacing between image and captionNew Section After Image (40px above)Heading to Table: 24pxHeading with Table BelowElementSpacing AboveSpacing BelowHeading 140px (from content)24px (to content)Heading 240px (from content)24px (to content)Heading 340px (from content)24px (to content)Table to Heading: 40pxContent TypeMargin to HeadingParagraph40pxList40pxCode Block40pxImage40pxTable40pxNew Section After Table (40px above)Heading to Embed: 24pxHeading with Embed BelowParagraph on WarpcastWarm up with a delicious spicy Italian chicken sausage and barley soup! This hearty recipe from @galazio combines sausage, fresh veggies, and a smooth, creamy texture thanks to a perfectly tempered egg. Perfect for cozy nights in your kitchen! Check out the full blog post for details. https://paragraph.com/@galazio/spicy-italian-chicken-sausage-and-barley-soupFarcasterEmbed to Heading: 40pxParagraph on WarpcastWarm up with a delicious spicy Italian chicken sausage and barley soup! This hearty recipe from @galazio combines sausage, fresh veggies, and a smooth, creamy texture thanks to a perfectly tempered egg. Perfect for cozy nights in your kitchen! Check out the full blog post for details. https://paragraph.com/@galazio/spicy-italian-chicken-sausage-and-barley-soupFarcasterNew Section After Embed (40px above)SummaryThis visual guide demonstrates all heading margin specifications within our typography system:Title to Subtitle: 16px (tight relationship)Subtitle to Content: 40px (clear separation)Between Headings: 32px (hierarchical relationship)Heading to Content: 24px (section connection)Content to Heading: 40px (section separation)Consistent application of these margin specifications creates a harmonious reading experience with clear content hierarchy and improved readability.

## Publication Information

- [Meesh @ Paragraph](https://paragraph.com/@meesh-paragaph/): Publication homepage
- [All Posts](https://paragraph.com/@meesh-paragaph/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@meesh-paragaph): Subscribe to updates

## Optional

- [Collect as NFT](https://paragraph.com/@meesh-paragaph/heading-margins-visual-guide-to-proper-spacing): Support the author by collecting this post
- [View Collectors](https://paragraph.com/@meesh-paragaph/heading-margins-visual-guide-to-proper-spacing/collectors): See who has collected this post