Room to Breathe: Fix the Cramped Spacing in AI Pages
You asked AI for a landing page, a report, a resume site. What came back has the right words, a decent font, a reasonable color or two, and it still looks off. Not broken, just cheap. Tight. Like everything is holding its breath.
Nine times out of ten, the problem is spacing. The single clearest tell of an AI-generated page is not the typography or the palette. It is cramped, uniform whitespace. AI pages look cramped because the model fills space instead of shaping it, and once you see it you cannot unsee it.
The good news: spacing is the easiest thing on a page to fix, and it moves the result more than almost any other change. You do not need design talent. You need a few rules and a prompt that hands them to the AI.
TL;DR
AI gives every element a similar margin, packs sections tight, and lets text run the full width of the screen. To fix it: tell the AI to use a spacing scale (multiples of 8), make the gaps between sections large (around 80px on desktop), cap reading width at about 70 characters per line, and group related things close while pushing unrelated things apart. Same content, same colors, a page that suddenly looks designed. The prompt is near the bottom.
Why do AI-generated pages look cramped?
Ask a model for a page and it optimizes for one thing: getting everything in. It writes correct HTML, applies a tidy default margin here and there, and stacks the blocks. What it almost never does on its own is make decisions about space.
So you get three specific failures, over and over:
- Uniform spacing. The gap between a headline and its paragraph is about the same as the gap between two whole sections. Everything is equidistant, so nothing reads as grouped or separate. The page becomes one flat wall.
- Tight sections. Major sections butt up against each other with a little padding, as if the page is trying to save paper. There is no pause between ideas, so the reader never gets a beat to absorb one block before the next starts.
- Full-width text. On a wide screen, paragraphs stretch 120 characters across. Your eye loses its place on the return trip to the next line, and reading feels like work.
None of these are bugs. They are defaults. And defaults are exactly what you override with a better prompt.
Whitespace is not empty space
The instinct, especially when you have a lot to say, is to treat empty space as waste. Fill it. Tighten it up. Fit more in.
That instinct is backwards. Whitespace is the part of the page that does the organizing. It is what makes a headline feel like a headline, what tells you a caption belongs to the image above it, what separates one idea from the next without a single line or box. Designers call the generous version of this “room to breathe,” and it is not decoration. It is structure you can see.
There are two kinds worth naming:
- Macro whitespace is the big stuff: margins around the page, gaps between sections, the space framing a hero. It sets the overall calm or busyness.
- Micro whitespace is the small stuff: line height, the gap between a label and its value, padding inside a button. It sets readability and polish.
AI tends to underdo both. The fixes below handle each.
Use a spacing scale
Here is the one change that fixes the most at once: stop letting the AI pick a different margin every time, and give it a spacing scale.
A spacing scale is a short list of values, usually multiples of a base number like 4 or 8 pixels, that you use for every gap on the page. Something like: 4, 8, 16, 24, 32, 48, 64, 96. Every margin, every padding, every gap gets picked from that list. Nothing in between.
Why it works: consistency reads as intention. When the same handful of gaps repeats across a page, the eye picks up the rhythm even though no one consciously measures it. When gaps are random, the page feels slightly wrong in a way most people cannot name. A scale is the difference between a page that was designed and a page that was merely assembled.
Telling the AI to “use an 8-point spacing scale for all spacing” is often the single highest-leverage line in a design prompt.
Make the gaps between sections big
Once you have a scale, spend the big values where they matter: between sections.
The rule of thumb is simple. Big gaps for big breaks, small gaps for small breaks. The space between two major sections should be large enough that you read them as two separate ideas, often 64 to 96 pixels of vertical padding on desktop, scaling down to maybe 40 to 48 on a phone. The space between a heading and its own paragraph should be small, because they belong together.
AI gets this exactly backwards by default, giving section breaks roughly the same gap as paragraph breaks. The result is the flat wall. Fix the section padding and the page instantly gains a sense of chapters.
Cap the reading width
Text that runs the full width of a wide monitor is hard to read, full stop. The comfortable range is roughly 50 to 75 characters per line. Past that, your eye has to travel too far to find the start of the next line, and you lose your place.
The fix is one line in the prompt: cap body text at a max width of around 65 to 70 characters, usually by setting a max-width of about 65ch on your text containers. Headings and full-width imagery can still span the screen. It is the paragraphs that need a leash. This single constraint makes long-form content on a report or article page dramatically easier to read.
Group with proximity
The last move costs nothing and signals design maturity more than any gradient: put related things close together and unrelated things far apart.
This is the proximity principle. A price should sit tight against the plan it belongs to. A caption should hug its image. A group of three feature cards should sit closer to each other than the group sits to the section above it. The reader infers “these belong together” from distance alone, before reading a word.
AI spaces things evenly, which erases these relationships. Telling it to “group related items with tight spacing and separate unrelated blocks with generous spacing” restores them.
Before and after: same content, more room
Here is the whole idea in one picture. Identical content. The only change is space.
Nothing was added. Nothing was restyled. The content simply got room, and the version on the right reads as something a person made on purpose.
Cramped defaults vs deliberate spacing
| Element | AI default | What to ask for |
|---|---|---|
| Gaps | Random, roughly equal | An 8-point spacing scale for everything |
| Section breaks | Tight, same as paragraphs | 64 to 96px vertical padding on desktop |
| Text width | Full viewport width | Capped at about 65 to 70 characters per line |
| Related items | Evenly spaced | Grouped tight, separated from other groups |
| Line height | Snug (1.2 or so) | 1.5 to 1.7 for body copy |
| Overall feel | Busy, holding its breath | Calm, scannable, designed |
A copy-paste spacing prompt
Add this to any page-building request, or paste it after a cramped draft to fix it in place.
Apply a deliberate spacing system to this page.
- Use an 8-point spacing scale for every gap: choose only from
4, 8, 16, 24, 32, 48, 64, 96 pixels. No in-between values.
- Vertical padding between major sections: about 80px on desktop,
40px on mobile. Make section breaks clearly larger than the gaps
between elements inside a section.
- Keep a heading tight to the text it introduces; put the large gap
before the next section, not between a heading and its paragraph.
- Cap body text width at about 65ch so no line runs the full screen.
- Set body line-height to 1.6.
- Group related items with tight spacing (cards in a row, a label and
its value) and separate unrelated blocks with generous spacing.
- Keep generous outer page margins; do not let content touch the edges
on desktop.
Return the complete self-contained HTML with all CSS inlined.Short, specific, and it names values instead of adjectives. “Make it less cramped” leaves the model guessing. “80px between sections, 65ch text width, 8-point scale” does not.
Fix a page you already have
If the AI already handed you a cramped page, do not start over. Spacing is forgiving because it lives almost entirely in the CSS. Give one focused instruction at a time: “increase the padding between sections to 80px,” then look, then “cap the paragraphs at 65ch,” then look. Changing spacing rarely breaks layout, so you can tune it without fear of the whole page shifting.
The catch is that you have to see the page at full size to judge it. A cramped layout looks fine in a tiny chat preview and obvious on a real screen, and line length only reveals itself at the width people will actually read at.
That is the point where you want the page live, not trapped in the chat. Once you have a self-contained HTML file, you can publish it as a real link in seconds with VisiblePage: paste the HTML or drop a ZIP and get a live URL that opens at full size on any device, with every button, chart, and animation intact. Because the page is served fast from the edge and lives at one canonical link, you can keep tuning the spacing and re-publishing to the same URL, so the version you are reviewing is the version you share. Set it public, private, or password-protected, or point your own domain at it.
Try it now: Publish your AI-generated HTML with VisiblePage and get a live link in seconds.
Frequently asked questions
Why do AI-generated pages look cramped? Because the model fills space instead of shaping it. It gives every element a similar margin, packs sections tight, and lets text run the full width of the screen. The fix is deliberate space: a consistent scale, generous section gaps, and short line lengths.
What is a spacing scale and why does it matter? A small set of values, usually multiples of 8, that you use for every gap on the page. Picking from the same list instead of guessing each time is what makes a page feel designed, because the eye reads the repeating rhythm even when no one can name it.
How much space should there be between sections? More than you think, often 64 to 96 pixels of vertical padding on desktop. Section breaks should be clearly bigger than the gaps between elements inside a section, or the page flattens into one column.
Is whitespace wasted space? No. Whitespace does the work of grouping, separating, and guiding the eye. Removing it to fit more in almost always makes a page harder to read. Empty space is structure you can see.
How do I fix a cramped page the AI already made? Give targeted spacing feedback one change at a time, then publish the live page and judge it at full size. Spacing problems are obvious on a real screen and invisible in a chat preview.