General Spacing Techniques

When styling lists, maintain consistent vertical spacing with surrounding elements and horizontal spacing between list items.

Vertical Rhythm

Consistent spacing between list elements and surrounding content

Match list margins with paragraphs and headings

Use relative units (em, rem) for scalability

                            ul, ol, dl {
                            
  margin-top: 1em;
                            
  margin-bottom: 1em;
                            
  padding-left: 2.5em;
                            
}
                            
li, dd {
                            
  margin-bottom: 0.5em;
                            
}

Line Height & Typography

Set consistent line-height for list items

Match font size with surrounding text

Use consistent font family throughout

Spacing Comparison

Inconsistent Spacing

First item
Second item
Third item

Consistent Spacing

First item
Second item
Third item

Pro Tip

Establish a baseline grid for your design and align all list elements to it. This creates visual harmony and improves readability.