Here's a basic bulleted list demonstrating the proper spacing between individual list items:

• This is the first item in the list

• This second item appears 12px below the first item

• This third item has the same 12px spacing

• This consistent rhythm helps readers distinguish individual items

• While maintaining the visual grouping of the list as a whole

The 12px spacing between list items creates enough separation for clarity while preserving the cohesive nature of the list. This spacing is approximately 40% of the body text line height (30px).

This paragraph precedes a list. When transitioning from paragraph text to a list, we use a 24px margin. This provides enough separation to distinguish the list as a separate element while maintaining its connection to the paragraph that introduces it.

• This list appears 24px below the preceding paragraph

• The spacing clearly indicates a transition to a different content format

• While showing that this list relates to the content above

• This balanced spacing improves content hierarchy and readability

• This is a list that precedes a paragraph

• When we transition from a list back to regular paragraph text

• We maintain the same 24px spacing for symmetry

• This creates a consistent vertical rhythm throughout the document

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

• This list appears 24px below the heading

• The heading-to-list spacing matches the heading-to-paragraph spacing

• This consistency helps maintain proper document flow

• While creating a clear relationship between the heading and its list

• This is a list that precedes a heading

• When transitioning from a list to a heading

• We use a larger 40px margin

• This signals the beginning of a new content section

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.

Here's the first list showing spacing between two separate lists:

• Item one in the first list

• Item two in the first list

• Item three in the first list

• Final item in the first list

And here's a second list with 24px spacing from the first list:

• Item one in the second list

• Item two in the second list

• Item three in the second list

The 24px spacing between separate lists provides enough separation to indicate these are distinct groups while maintaining consistent document rhythm.

Here's a demonstration of proper nested list spacing:

• This is a parent list item

  • This child list begins 12px below its parent

  • The indentation and spacing work together

  • To create clear visual hierarchy

• This is another parent list item

  • With its own child items

  • Properly indented and spaced

• Final parent list item

Nested lists use the same 12px spacing as regular list items, with indentation providing the additional hierarchical distinction.

• This list precedes a code block

• When transitioning from a list to code

• We use a 24px margin

• This provides clear separation while maintaining context

javascript// This code block appears 24px below the list
function listSpacing() {
  const listItemSpacing = 12;
  const listToElementSpacing = 24;
  const listToHeadingSpacing = 40;
  
  return { listItemSpacing, listToElementSpacing, listToHeadingSpacing };
}

css/* This code block precedes a list */
.list-margins {
  margin-top: 24px; /* Space after another element */
  margin-bottom: 24px; /* Space before another element */
}

.list-item-margins {
  margin-bottom: 12px; /* Space between list items */
}

• This list appears 24px below the code block above

• The consistent 24px spacing maintains document rhythm

• While providing clear distinction between content types

• This symmetrical approach improves readability

• This list precedes an image

• When transitioning from a list to visual content

• We use a larger 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

• This list precedes a table

• Similar to images, tables represent a different content mode

• The 32px margin provides clear separation

• While maintaining the relationship between related content

• This list appears 32px below the table above

• Tables create a significant shift in content structure

• The larger margin helps transition back to list content

• While maintaining the overall document flow

• This list precedes an embedded element

• Embeds represent external content or interactive elements

• The 32px margin provides clear separation

• While maintaining context for the embedded content

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 list appears 32px below the embedded content

• When returning to list content after an embed

• We maintain the same 32px spacing for symmetry

• This creates consistent vertical rhythm throughout the document

• This list precedes a horizontal divider

• Dividers signal significant breaks in content

• We use a larger 40px margin to emphasize this transition

• This spacing reinforces the divider's role in separating sections

• This list 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

The same margin specifications apply to numbered lists:

1. This is the first numbered item

2. Each numbered item has 12px spacing between items

3. The spacing from other elements to numbered lists follows the same pattern

4. For example, 24px from paragraphs and 32px from images

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

1. List Item to List Item: 12px

2. Paragraph to/from List: 24px

3. Heading to List: 24px

4. List to Heading: 40px

5. List to List: 24px

6. Nested Lists: 12px + indentation

7. Code Block to/from List: 24px

8. Image/Table/Embed to/from List: 32px

9. Divider to/from List: 40px

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 lists effortlessly, improving both comprehension and engagement.