CSS Paragraph Spacing

Controlling spacing between paragraphs and content blocks is essential for creating readable, well-organized pages.

Margin for Paragraph Spacing

p {
    margin-bottom: 1rem;
}

/* Remove margin on the last paragraph */
p:last-child {
    margin-bottom: 0;
}

Spacing Between Headings and Paragraphs

h1, h2, h3 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

p {
    margin-bottom: 1rem;
}

/* No top margin on the first heading */
h1:first-child,
h2:first-child {
    margin-top: 0;
}

The Lobotomized Owl Selector

A clever technique to add spacing between any adjacent elements:

/* Add margin-top to every element that follows another */
.content * + * {
    margin-top: 1rem;
}

This creates consistent vertical rhythm without worrying about individual elements.

Using Gap

With Flexbox or Grid, you can use gap instead of margins:

.content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

Best Practices

• Use consistent spacing values (multiples of 0.25rem or 0.5rem)
• Prefer margin-bottom over margin-top for content flow
• Remove extra margins on first/last children to prevent double spacing