Padding-left or margin-left?

The generic section nobody talks about

As you should know by now if you follow this blog, I’m not using <section> as a landmark. But I might be the only one doing so. Every article, every tutorial, every Stack Overflow thread treats <section> as a landmark by default. The idea of <section> as a plain semantic wrapper—role="generic"—is practically nonexistent online. And styling it? That’s a black hole.

When I searched for anything about how to style a generic section, how to make its boundaries visible, I found nothing. Not a single post addressed the use case I was pursuing. I shouldn’t have been surprised, given how hard it was to figure this element out in the first place (see The <section> element).

The first was a tutorial titled “HTML – <section> Tag” from TutorialsPoint. It included an example of styling nested sections—promising at first glance. But the CSS used both padding-left and margin-left, without clarifying their roles or intent. The second was a Stack Overflow thread with a title that sounded like it had read my mind: “Is there a way to automatically indent nested sections in CSS?” Intriguingly, the example did use margin-left. But the question wasn’t about styling—it was about targeting nested sections. There was no commentary on the use of margin-left; again, not the focus of this thin, three-answer thread.

Two faint signals. Not answers, not guidance—just enough moisture to keep the seed of doubt alive.

When indentation means the wrong thing

No matter how I phrased my query—“full paragraph,” “entire block,” “indent the whole thing”—the results were stubbornly, overwhelmingly one-dimensional. The web had one answer and one answer only: text-indent. That property shifts the first line of a paragraph inward. It’s a typographic flourish, a nod to print design.

But I wasn’t trying to style the first line. I was trying to style the whole block. To reflect the structure. To make the hierarchy visible. To show which section a paragraph belonged to, not where it began. Despite the frustration, I kept searching. Strong-willed, maybe stubborn. And slowly, something shifted. I began to find examples—scattered, inconsistent, but real. Most started with text-indent, as if that were the default interpretation of “indentation,” but then they’d offer alternatives: one example using padding-left, another using margin-left. No explanation, as if the reader were meant to guess which applied to what. But a few—just a few—focused solely on margin-left.

The seed was starting to sprout.

Copilot on the stand

When I asked Copilot to defend its choice, it didn’t hesitate. The response was thorough, confident, and—at first glance—persuasive. It framed the debate as a matter of semantic alignment: my goal was to “indent the content of this section,” and that, it claimed, was precisely what internal spacing (padding) was made for.

Given your goals and constraints, the correct choice is padding, not margin.Copilot

This wasn’t just a repeat of earlier advice—it was a full-blown defense. Copilot also invoked Gemini’s rule-of-thumb distinction: padding for internal spacing, margin for external spacing. But the core argument remained unchanged, each point reinforcing the case for padding-left over margin-left:

• Visual hierarchy lives inside the section
• Nested structure and consistency
• Interaction with inner backgrounds and pullquotes/asides
• Responsiveness and readability
• Accessibility intent

Your structural semantics are already handled by headings and sections. The indentation is a visual cue for sighted readers. That’s precisely what internal spacing (padding) is made for.Copilot

Copilot responded with clarity:

“When a <section> has no background, no border, and no visible box styling, margin-left and padding-left look identical because both push the text inward […] So in a ‘naked’ section, both just shift the text. But the moment you add a background, border, outline, or any layout constraint, the difference becomes visible and meaningful.”

As for the prevalence of margin-left in StackExchange answers and tutorials?

“Many of those threads are about individual paragraphs or list items, not semantic section wrappers. In those cases, margin is often used to create space between sibling blocks. Some are quick ‘visual hacks’ where authors aren’t thinking about box ownership or future styling. In a minimal example with no backgrounds, both work, so margin is the first thing that comes to mind. But in your nested section hierarchy use case, padding is the more robust, semantically aligned choice.”

Its final verdict remained unchanged: “Use padding-left on your nested <section> wrappers. It matches your intent, avoids future layout surprises, and will behave correctly if you ever add section‑level backgrounds or borders.”

Gemini on the stand

I asked Gemini. I needed to be sure. I wanted confirmation that I was using the correct approach. Not just what worked, but what was recommended. The best practice. The standard. I asked Gemini to elaborate, and it did:

The choice between padding and margin for indentation, especially when it comes to best practices, can seem subtle but has significant implications. For your purpose of visually representing the nested structure of <section> elements, using padding-left is indeed the best practice.Gemini

The CSS box model is the foundation of layout on the web. Every element is treated as a rectangular box composed of four layers:

Content: The actual text, image, or media inside the element (in blue in the image below).

Padding: Space between the content and the element’s border. It’s internal—part of the element’s box.

Border: The visible edge around the element, if defined.

Margin: Space outside the border. It separates the element from its neighbors.

While the content is the core of the box—the part users directly interact with—the entire box matters for layout. A few key points to keep in mind. Padding pushes the content inward but does not change the element’s position relative to its neighbors. Borders can be styled (solid, dashed, colored, etc.) or left invisible, but they always define the outer edge of the element’s box. Margins create separation between elements, controlling the distance between boxes in the layout.

Understanding the difference between padding and margin is essential for creating well-proportioned and visually appealing layouts. Remember that padding affects the inner space of an element, while margin controls the space around an element.Grace Snow

The box model doesn’t just let us add borders or define spacing—it also determines how the size of an element is calculated. To compute the total width and height of a box, you must include both padding and borders. Margins, however, are not part of the box’s intrinsic size. This distinction is crucial: the box’s total width and height end at the border, but the margin still influences how much room the element occupies on the page.

Browser developer tools make the box model much easier to grasp. They visually display the content, padding, border, and margin of any element you inspect. The screenshot above comes from such a tool. In this case, the content area measures 502.275 × 25 pixels—a 25‑pixel spacer. The oddly specific width (502.275) comes from my theme, Twenty Seventeen: The main column width is up to 525 wide with the two column layout. The discrepancy is likely Gutenberg’s doing—apparently, it couldn’t resist collecting a pixel‑sized toll.

In essence, Gemini explained that using padding-left creates space inside the section’s box, pushing the content inward while keeping it visually contained. This matters because the padding becomes part of the section itself: if I were to add a background color, it would extend into the padding, enclosing the heading and paragraphs as one coherent block. By contrast, margin-left would simply shift the entire section over, leaving an empty gap that does not convey the same sense of belonging. Padding, Gemini argued, also reinforces the parent–child relationship between nested <section> elements, since the child’s content is indented within its parent’s box. Finally, it noted that padding contributes to the element’s internal flow, whereas margin is meant for external separation. For indentation, the internal approach is the one that best reflects the structure I wanted to show.

When the background‑color evidence backfired

Before I tried, Copilot argued: “padding‑left will keep the indent inside the colored area. With margin‑left, the colored area would start at the original edge, leaving an awkward empty strip.” Yet when I tried it, the opposite seemed true. If I applied a background color to my content, it started right at the left edge of the text. With margin‑left, I got the same natural result. With padding‑left, though, I was left with a strange band of color with no text in it. In short, margin‑left felt more natural to me. I explained it to Copilot: “So, I did play with the background color. And to be honest,…”

Its response missed the point entirely (as it is more and more the case recently, unfortunately): instead of addressing my objection, it offered “Alright — let’s make this concrete so you can see the difference in action and decide based on what actually happens in the browser, not just theory.” It provided a “minimal demo,” i.e., a stripped‑down HTML/CSS example for me to paste into a blank HTML file and open in my browser. That should convince me that “If you want the indent to be part of the section’s owned space (so any background/border includes it), padding-left is the right choice.” So, I pushed back: “Actually, it’s the opposite,” I told. “Inside DevTools, when I apply a background…”

I restated the color test as plainly as I could (as I just did to Copilot): the H2 section in yellow, the H3 section in green. With no indent on H2, the color starts at the text—natural. With padding-left on H3, the green block sits directly under the yellow, creating a 1em gutter of pure green with no text. Visually, that erases the cue of level: the green looks like more of the same block rather than a nested child, and I wouldn’t know at a glance whether I’m looking at H2 or H3. With margin-left, the green starts at the text—again, natural. And crucially, a clean band of yellow remains on the left, signaling that the green belongs under yellow. That thin parent‑color band was maybe the cue I needed.

What was supposed to be the decisive evidence in favor of padding had, at least for me, backfired. The very background‑color argument intended to favor padding ended up demonstrating the opposite for my use case. It planted a doubt so strong, I stopped writing the previous post mid-sentence and started this one instead.

When the testimony flipped

And yet, despite that preface, the very thing I had warned against happened again. After months of insisting that padding-left was the best practice, my observation about background colors — the one that was supposed to settle the case — became the trigger for a complete reversal. Now, it said, margin-left actually matched my mental model better. I couldn’t help but point out the irony: “And we conclude, again, ‘flips that,’ with exactly what I warned you against at the beginning!”

Copilot tried to defend itself. This wasn’t a random reversal, it argued, but a correction once it understood my true intent. If what I wanted was for the indent to sit outside any colored area — like the gutters in lists or threaded comments — then margin was the right tool. But I pushed back again. I wasn’t chasing a “look I liked,” I was trying to apply the proper code for a structural purpose: to make sure readers could see at a glance which heading a paragraph belonged to, just as nested comments show which reply belongs to which parent. The background‑color test was only ever a way to visualize the argument, not my end goal. I had already rejected colored blocks as a solution — indentation alone was my choice.

At that point, Copilot finally delivered what it called a definitive, no‑back‑and‑forth answer. Indentation, in my case, was not decorative spacing but a structural marker of hierarchy. That meant the correct property was margin-left, exactly as lists and blockquotes have always done. Padding, it admitted, would only create stacked colored boxes and obscure the parent‑child relationship.

After all the back‑and‑forth, the testimony had flipped completely: the “proper” way to style my nested <section> elements was with margin.

Use margin-left for indentation of nested <section> elements. It’s semantically aligned with your goal, matches established patterns for hierarchical nesting, and preserves the visual parent/child relationship if backgrounds are ever applied.Copilot

After arguing the opposite stubbornly, it too now declared that my observation had changed the game. Suddenly, margin-left was not just acceptable but, in its words, a “new best practice.” My simple color‑band test, it said, revealed a flaw in the padding approach and proved that margin-left created the clearer hierarchy. I pointed out the obvious: the WHATWG hadn’t rewritten its recommendations in the last five minutes, so the inconsistency was entirely its own.

The standards hadn’t changed, it admitted; its earlier answers had been flawed. The real issue, it explained, was a clash between principle and practice. By the book, padding is the correct property for internal containment and structural hierarchy. But in my specific case — where indentation itself is the visual cue, and backgrounds are only a diagnostic tool — margin produced the clearer, more intuitive result: “use margin-left.”

The official best practice for visually nesting content is to use padding. Why? Because it correctly places the indented content inside the container, which is what a nested element is. It represents the hierarchy logically.Gemini