This guide illustrates the correct margin specifications between paragraphs and various content elements. Each example precisely demonstrates the pixel measurements needed to maintain proper content flow and readability.

This is the first paragraph in a sequence. With our updated typography system (18px font size with 30px line height), we use a 22px margin between paragraphs. This creates enough separation to indicate a new thought or point.

This is the second paragraph. Notice how the 22px spacing provides a clear visual break while maintaining the flow between related ideas. This spacing is approximately 73% of the line height, creating a balanced rhythm that guides the reader through the content.

This is the third paragraph in sequence. Consistent paragraph spacing is essential for establishing a comfortable reading cadence. Too little space makes content feel cramped, while too much space disconnects related thoughts.

This paragraph precedes a bulleted list. When transitioning from paragraph text to a list, we use a slightly larger margin of 24px. This subtle increase in spacing signals a shift in content structure while maintaining the connection between the paragraph and the list that follows it.

• This list appears 24px below the preceding paragraph

• The spacing is designed to indicate that this list relates to the paragraph above

• Yet it provides enough separation to distinguish the list as a distinct content element

• Each list item has 12px spacing between items

• This is the final item in a list that precedes a paragraph

• When transitioning from a list back to paragraph text

• We maintain the same 24px spacing for consistency

This paragraph appears 24px below the list above. The consistent 24px spacing for transitions between paragraphs and lists creates a balanced visual rhythm throughout the document. This symmetrical approach to spacing enhances readability by maintaining predictable patterns.

This paragraph precedes a code block. When transitioning from paragraph text to a code example, we use a 24px margin. This spacing provides a clear distinction between the explanatory text and the code demonstration while showing their relationship.

javascript// This code block appears 24px below the paragraph
function calculateParagraphSpacing() {
  const lineHeight = 30;
  const paragraphSpacing = 22;
  const paragraphToElementSpacing = 24;
  
  console.log(`Line height: ${lineHeight}px`);
  console.log(`Paragraph spacing: ${paragraphSpacing}px`);
  console.log(`Paragraph to element: ${paragraphToElementSpacing}px`);
}

css/* This code block precedes a paragraph */
.paragraph-margins {
  margin-top: 0;
  margin-bottom: 22px; /* Spacing between paragraphs */
}

.paragraph-to-element {
  margin-bottom: 24px; /* Spacing from paragraph to other elements */
}

This paragraph appears 24px below the code block above. When returning to regular text after a code example, we maintain the same 24px spacing to create symmetry in the document's vertical rhythm. This consistent approach makes the content more predictable and easier to read.

This paragraph precedes an image. When transitioning from text to visual content like images, we use a larger 32px margin. This increased spacing acknowledges the stronger visual break that images create in the content flow and provides room for the eye to transition between reading text and processing visual information.

This paragraph appears 32px below the image caption above. When returning to paragraph text after an image, we maintain the 32px spacing to create a balanced transition. Images create significant visual breaks in content, so the larger margin helps re-establish the reading rhythm.

This paragraph precedes a table. Similar to images, tables represent a different content mode that benefits from increased spacing. The 32px margin provides a clear separation while maintaining the relationship between the explanatory text and the tabular data that follows.

This paragraph appears 32px below the table above. Tables, like images, represent a significant shift in content structure, so the larger margin helps transition the reader back to paragraph text while maintaining the overall document flow.

This paragraph precedes an embedded element. Embeds (such as social media posts, interactive elements, or videos) represent external content and benefit from increased spacing. The 32px margin provides clear separation while maintaining context.

Paragraph on Warpcast

Warm 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-soup

Farcaster

Paragraph on Warpcast

Warm 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-soup

Farcaster

This paragraph appears 32px below the embedded content above. When returning to paragraph text after an embed, we maintain the same 32px spacing to create symmetry in the document's vertical rhythm and provide adequate transition back to the main content.

This paragraph precedes a horizontal divider or rule. Dividers signal significant breaks in content, so we use a larger 40px margin to emphasize this transition. This spacing reinforces the divider's role in separating distinct sections or topics.

This paragraph appears 40px below a divider. When beginning new content after a divider, the 40px spacing provides a fresh start while maintaining the document's overall rhythm. This larger spacing acknowledges that content following a divider typically represents a new thought or section.

This paragraph precedes a heading. When transitioning from paragraph text to a heading that starts a new section, we use a larger 40px margin. This increased spacing signals the end of one section and the beginning of another, creating clear content boundaries.

This visual guide demonstrates all paragraph margin specifications within our typography system:

1. Paragraph to Paragraph: 22px (related content)

2. Paragraph to List/Code: 24px (related but structurally different)

3. Paragraph to Image/Table/Embed: 32px (stronger visual break)

4. Paragraph to Divider/Heading: 40px (section separation)

These margin specifications create a harmonious reading experience by establishing:

• Clear visual hierarchy

• Consistent vertical rhythm

• Appropriate content relationships

• Improved readability and content flow

Consistent application of these spacing guidelines helps readers navigate content effortlessly, improving both comprehension and engagement.