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

This paragraph precedes an image. When transitioning from paragraph text to an image, we use a 32px margin. This larger spacing acknowledges the significant visual shift that occurs when moving from text to visual content. The 32px margin provides enough space for the reader's eye to transition between reading mode and visual processing mode.

This paragraph appears 32px below the image caption above. When returning to paragraph text after an image, we maintain the same 32px spacing to create symmetry in the document's vertical rhythm. Images create significant visual breaks in content, so the larger margin helps re-establish the reading rhythm when returning to text.

The 24px spacing between a heading and an image follows the same pattern as heading-to-content spacing throughout the document. This creates consistency while acknowledging that the image is content that belongs to the heading above it.

The 40px spacing before a heading creates a clear section break, regardless of what content type precedes it. This consistent approach to section transitions improves content structure and readability, particularly when an image concludes one section before moving to a new topic.

The caption has a 12px margin from the image, creating a close connection between the visual content and its description. This smaller spacing indicates that the caption is directly related to and dependent on the image above it.

This paragraph appears 24px below the image caption. When measuring the margin from an image to a following element (other than a heading), we measure from the caption (if present) rather than from the image itself. This creates more consistent spacing regardless of whether the image has a caption.

• This list precedes an image

• When transitioning from a list to visual content

• We use a 32px margin

• This acknowledges the stronger visual break that images create

• This list appears 32px below the image caption

• The increased spacing helps transition from visual to text content

• While maintaining the overall document flow

• Each content type receives appropriate spacing based on its visual weight

javascript// Placeholder code
const margins = {
  standard: 24,    // text elements
  visual: 32,      // images, tables
  section: 40      // headings, dividers
};

console.log(`Image margins: ${margins.visual}px`);

javascript// Placeholder code
const margins = {
  standard: 24,    // text elements
  visual: 32,      // images, tables
  section: 40      // headings, dividers
};

console.log(`Image margins: ${margins.visual}px`);

Multiple images in sequence need clear separation to be perceived as distinct visual elements:

The 40px spacing between images (measured from the first image's caption to the second image) creates sufficient separation to indicate these are distinct visual elements, preventing them from visually merging into a single unit.

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

Note the 40px spacing between the divider and the image. Dividers signal significant breaks in content, so the larger margin helps establish a clear separation between sections.

The 40px spacing from an image caption to a divider creates a clear section break. This larger margin is used consistently for transitions between major content sections.

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

1. Text Elements to/from Image:

   • Paragraph to/from Image: 32px

   • List to/from Image: 32px

   • Code Block to/from Image: 32px

   • Heading to Image: 24px

2. Visual Elements to/from Image:

   • Image to Image: 40px

   • Table to/from Image: 32px

   • Embed to/from Image: 32px

3. Image-Specific Spacing:

   • Image to Caption: 12px

   • Image Caption to Next Element: 24px (except headings: 40px)

4. Section Transitions:

   • Image to Heading: 40px

   • Divider to/from Image: 40px

These margin specifications create a balanced visual rhythm that enhances the reader's experience by:

• Providing appropriate transitions between text and visual content

• Creating clear separation between distinct visual elements

• Maintaining consistent document flow

• Supporting intuitive content hierarchy

• Improving overall readability and visual appeal

Consistent application of these spacing guidelines helps readers process visual information more effectively while maintaining the narrative flow of the content.