Verdict

Introduction

It was supposed to be nothing more than a short interruption, a technical aside about how to implement indentation with CSS: padding‑left or margin‑left? A deceptively simple question that should have been resolved in a single post. But there were no guiding rules, no authoritative source to establish beyond a reasonable doubt which property should prevail in my specific use case — wrapping my headings together with their associated content in <section> elements, the latter serving not as landmarks but as structural containers. A case already starved of clear information on its own, and so what began as a straightforward inquiry transformed into a courtroom drama of epic proportions.

I found myself cast in the role of judge, presiding over a trial that refused to end. The first hearing witnessed the rise of padding‑left, its confident claim to the stand, only to falter and fall when pressed. An appeal followed, with margin‑left ascending in turn, but it too stumbled under scrutiny and collapsed into a mistrial, leaving the case unresolved. With no authoritative source to establish precedent, no guiding rule to settle the matter beyond doubt, I was forced to turn to witnesses of another kind — not human, but artificial. Copilot, Gemini, and their many incarnations were summoned to the stand as expert voices, meant to provide the guiding rules I lacked. Yet their testimony betrayed me, flipping and contradicting itself at every turn. And so I sought the wisdom of a jury, twelve strong, to break the deadlock. But eleven seats remained empty, abandoned to silence. Only one courageous juror dared to speak, and for that solitary voice I remain profoundly grateful.

With no authoritative source to consult, no consensus to anchor the case, and no jury to deliver a verdict, I became dependent on those fickle witnesses — supposedly expert, yet treacherous in their counsel. Each reversal, each contradiction, each confident declaration undone by the next, drove me deeper into confusion. What should have remained a brief aside metastasized into fixation, and that fixation hardened into obsession. Obsession, in turn, became a prison, and I its captive. Within those walls, I descended into madness, pacing the corridors of doubt, replaying testimony that never held. And without a verdict — whether from the absent jury or the judge himself (i.e., me) — there could be no exit. Both had failed me, and the trial dragged on without end. Until…

One night, facing the CSS Hydra alone — was it real, or merely the construct of a mind unmoored — I confronted the madness itself. The jury offered no help, save for the one solitary voice that had spoken. And in that confrontation, reason returned. The witnesses could not be trusted; they were my dragon sickness, the very delusion that spawned the Hydra. Yet when I acknowledged my mistake, I broke the spell. I began to think for myself, and from the chaos clarity finally emerged.

Clarity, once wrested from the Hydra’s grip, became the light that pierced the prison of doubt. And with that light, the trial could at last be concluded. Today, the gavel falls — not by the hand of witnesses, nor by the silence of jurors, but by mine alone. This is the verdict.

Back to the future

For months, I carried a clear picture of how padding-left and margin-left differ. This was the turning point in the very first trial — the background color experiment that actually backfired. With padding‑left, the color filled the indent, enclosing the space inside the section’s box. My nested section (heading level 3) appeared as a solid block of its own color, stacked neatly beneath its parent (heading level 2, painted in a different shade for that test). To my eye, it looked like a tower of blocks; an argument I would later wield against padding-left during the appeal. With margin‑left, the effect was different. The child’s color began at the text, leaving a vertical band of the parent’s color visible at the edge. Two colors stood side by side, parent and child aligned but distinct. It looked less like stacked blocks and more like Russian dolls, each smaller figure fitting within the larger.

With padding	With margin
Heading Level 2 This paragraph belongs to heading level 2. Heading Level 3 This paragraph belongs to heading level 3.	Heading Level 2 This paragraph belongs to heading level 2. Heading Level 3 This paragraph belongs to heading level 3.

That simple test etched itself into my mind, reinforced by Copilot’s echo. Padding meant towers; margin meant dolls. From that moment, I carried the conviction that this was the true distinction between the two: margin carved space outward, shrinking the box. Padding carved space inward, but the box itself remained constant. That shallow check hardened into certainty, and certainty became dogma. Copilot repeated it, I repeated it, and repetition made the lie feel like truth. Two patterns, two outcomes — neat, simple, and wrong.

With padding	With margin
Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6	Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6

It was under the weight of that conviction — the tower rising steadfast, the illusion of width preserved — that I finally settled on padding‑left. True, my first two hearings in this long trial had leaned toward margin‑left. Yet once the image of the tower took hold, it was no longer a bitter pill to swallow. The notion that padding kept the child bound within its parent, visually enclosed rather than cast adrift, carried enough force to silence the grudge I had once held. And when Copilot pressed the containment argument, echoed by Gemini, their chorus was enough to quiet my doubts.

Still, beneath that choice lay another influence, subtle and unseen. The mathematics of % had already whispered in the background, shaping my preference without my knowing. As I explained in my post about length units, % is always relative — it measures itself against the width of the parent, elegant in its proportionality, responsive by design. Yet that elegance depends entirely on context: on whether the parent’s width remains stable, predictable, unshaken. With the tower of padding‑left, the container seemed to hold firm, and % continued to reference the same steady width even as the nesting deepened. With margin‑left, however, each outward shove pressed the box against the container’s wall, narrowing the space within. And as the container shrank, so too did my indentation.

And so I carried padding‑left forward, armored by conviction, nudged by unconscious bias, blind to the fracture that would one day undo it.

Through CSS confusion toward insight

But when I put padding‑left, together with %, to the test, the numbers betrayed me. The spacing between my H3 and H4 was off: 23.594 px versus 22.351 px. I could not understand why (see embedded post above for the full account), because my conviction stood in the way. I believed padding preserved width, that the tower held firm, that % would always reference the same stable container. And so, when the math refused to align with that belief, I clung to Copilot’s explanation: The cause is almost certainly sub‑pixel rounding differences in the browser pipeline. It sounded plausible, technical enough to quiet doubt, and I accepted it.

Yet the numbers would not be silenced. I did not dismiss them as noise, anomalies, or errors in the experiment. The mathematics did not lie. It was my conviction that did — a fragile house of cards. When I finally unplugged myself from the artificial intelligence that had been bypassing my own, I began to think for myself. And in that moment, clarity struck. That was my duh moment.

I was wrong. Misguided. Lied to.

Each nested section, each new level of indentation, carried not only the hierarchy of the markup but the narrowing of its parent indeed. Every parent’s padding reduced its own content area, and the child inherited that reduced width. This repeated at every level, cascading downward. What I had believed to be constant was in fact shrinking step by step. The illusion of stability collapsed, one percentage compounding upon another — I saw the truth at last — simple, undeniable, and mine:

With padding	With margin
Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6	Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6

H2 and H3 do form the towers — solid, upright, their widths holding firm as if the conviction were true. But then no more. From H4 downward, the illusion collapses. Each new level shrinks, each child inherits the narrowing of its parent, and the tower gives way to a staircase of diminishing blocks.

This fracture in the pattern — the misstep, quite literally — would prove fatal to padding‑left.

Verdict

Having heard the arguments, examined the evidence, and considered the failed test alongside the fracture revealed in the staircase, this Court now pronounces its judgment. The property known as margin‑left is hereby upheld as the prevailing method. The opposing property, padding‑left, having been found defective and unable to withstand scrutiny, is dismissed. The ruling of this Court is final: margin‑left shall stand; padding‑left shall not.Judge

To sum up, margin‑left prevailed, not because it was the recommended way, but because padding‑left had failed. Ironically, the hydra fight — and the ensuing duh moment — brought to me, on a silver plate, the killer test I once tried to design but failed to deliver. The tower faltered, the staircase broke, and the truth stood plain: padding‑left could not hold. With the misstep exposed — the fracture in the staircase that doomed padding‑left — the truth was undeniable.

“Was not padding‑left originally chosen because it acts as the CSS metaphor for containment and thus matches the semantic meaning of the markup?”
“It was indeed chosen at first because it seemed to embody containment. It kept the box pressed against the left boundary, the content framed neatly within its parent. Yet the trial revealed the flaw in this argument: it holds only at the first level of nesting. What looked like semantic harmony soon collapsed into misalignment.”

“You cannot dismiss the fact that padding carries the sense of emphasis and grouping. That is precisely what a section does: thematic grouping.”
“True — sections are for thematic grouping. But when they are nested, their headings speak not of grouping but of hierarchy. And hierarchy is not the domain of padding. It belongs to margin. Headings are items in a sequence — H2 through H6 — each offset to show its rank. In that light, margin was not merely acceptable. It was the right tool. What I am expressing is structural hierarchy, not internal content spacing.”

“Back during the trial, when padding‑left was chosen as a stopgap, you acknowledged there were many arguments in favor of margin‑left — and just as many that cast doubt on padding‑left. How do you answer those now?”
“Indeed, those arguments came from the so‑called expert witnesses. Let it be remembered that their shifting testimony applied the same reasoning now to defend a property, now to wield against it. Moreover, many of these claims — the specter of margin collapsing among them — proved exaggerated or simply untrue. The Court therefore discards these arguments as unreliable, and they shall not weigh upon the verdict.”

“And what about lists? Do they not rely on padding?”
“Yes, lists do employ padding — at least <ul> and <ol> — but that is a different matter. Let me address this last point in detail.”

During the trial, I did raise the objection that lists rely on padding-left — forty pixels by default. That doubt was enough to stall the appeal in favor of margin‑left. Yet here lies the distinction. A list, in its essence, is not merely the raw HTML of <ul> and <li>. For me, a list is a structured block:

My list of items:

• item 1
• item 2
• item 3

In Gutenberg, I even built a reusable block — what they now call patterns — with this exact structure. But in terms of HTML, the list itself is simply:

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

It is this part — the items themselves — that receives the padding. And here the indentation is meaningful: globally, the items are part of “my list of items.” Even though the introductory paragraph is not technically a parent in HTML, it visually and semantically contains the list. The padding frames them as one collective, one block of meaning, signaling their shared identity. In that context, padding-left is justified. It belongs inside the block of meaning, not between separate elements. My earlier confusion came from forgetting that in HTML, lists do not include that extra paragraph I had added in my Gutenberg pattern — yet the visual logic still makes sense.

And therein lies the final distinction: lists may rightly claim padding for their internal cohesion, but sections and headings demand margin to declare their hierarchy. Indentation is about where the box sits in the layout relative to its parent — this is hierarchy, and margin is the idiomatic way to express it. The verdict stands: margin‑left is not only acceptable — it is the rightful tool.

Bang!