
Share Dialog
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
Table header | Table header |
Table row | Table row |
Table header | Table header |
|---|---|
Table row | Table row |
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
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:
This is the first numbered item
Each numbered item has 12px spacing between items
The spacing from other elements to numbered lists follows the same pattern
For example, 24px from paragraphs and 32px from images
This visual guide demonstrates all list margin specifications within our typography system:
List Item to List Item: 12px
Paragraph to/from List: 24px
Heading to List: 24px
List to Heading: 40px
List to List: 24px
Nested Lists: 12px + indentation
Code Block to/from List: 24px
Image/Table/Embed to/from List: 32px
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.
Meesh
No comments yet