How to Indent in WordPress: Mastering Formatting and Alignment

Press Tab in a WordPress paragraph block and nothing happens. That single dead keystroke sends thousands of people searching for how to indent in WordPress every month.

The block editor never shipped a universal indent button. List blocks got Indent and Outdent controls. Paragraph blocks got nothing.

So the answer depends on which editor you use and what kind of indent you actually need.

This guide covers every working method:

• Block toolbar and Dimensions panel padding
• Nested lists with Tab and Shift+Tab
• CSS rules for first-line and hanging indents
• Classic Editor buttons, HTML, theme.json, and page builders

You will also learn why an indent looks correct in the editor and disappears on the live page, plus how to keep it readable on a 375px screen.

What Is Indentation in WordPress?

Indentation in WordPress is horizontal spacing applied to a block, a paragraph line, or a nested list item. Three control surfaces produce it: the block toolbar, the Dimensions panel, and CSS properties like text-indent, padding-left, and margin-left.

The confusion starts because four separate things share one name.

Indentation is not the Spacer block (that one is vertical), not text alignment, and not the code indentation you see inside the editor pane.

WordPress never shipped a universal indent button in the block editor. List blocks got one. Paragraph blocks did not, and that single omission generates most of the search traffic on this topic.

Gutenberg adoption has climbed past 60% of WordPress sites, up from 37% in 2020 (Vapvarun, 2026). More people hit the missing button every year, not fewer.

Indentation is also one of the smallest levers you have over the empty space around your text, which is why it shows up in style guides that never mention CSS once.

The Difference Between Indent, Padding, and Margin in Blocks

Padding: space inside the block, so a background color or border extends into it.

Margin: space outside the block, so the background stops at the block edge.

Indent: the visual outcome, produced by either property.

Pick padding when the block carries a background or border. Pick margin when it does not, and margin collapse between stacked blocks stops being a surprise.

Editor-Only Indentation vs Front-End Indentation

The block editor loads its own stylesheet. Your theme’s public stylesheet is a separate file with separate rules.

The common failure: indentation looks correct in the editor canvas and vanishes on the live page, because the theme registered editor styles that core never applied to the front end.

• Preview in a new tab before trusting what the canvas shows you
• Block themes iframe the editor, which narrows the gap without closing it

How Do You Indent Text in the WordPress Block Editor?

Select the block, open the Settings sidebar, and set a left padding value under Dimensions. List blocks carry dedicated Indent and Outdent buttons in the block toolbar. Paragraph blocks have neither, so padding or a Group wrapper does the work instead.

WordPress 7.0 shipped on May 20, 2026, and the paragraph block still has no indent button. That was a design decision, not an oversight.

Blocks that expose padding controls in a standard block theme:

• Group
• Columns and Column
• Cover
• Quote
• Paragraph, but only when the theme enables appearanceTools or spacing.padding

Alignment is a different tool for a different job. If you want text edges to line up rather than shift right, stretching the lines to both margins is the setting you actually want.

Indenting a Single Paragraph

Fastest route: Settings sidebar, Dimensions, Padding, unlink the sides, then enter a left value.

• The preset scale runs from 20 through 80, exposed as --wp--preset--spacing--20 upward
• Custom values accept px, em, rem, %, and vw
• The Dimensions panel hides behind a three-dot menu in several popular themes

Constrained layout settings sometimes override your padding. Check the parent Group’s content width first.

Indenting Multiple Blocks Together

Select the blocks, open the three-dot menu, choose Group.

The Group wrapper takes padding once and every block inside shifts together. Nesting depth, list markers, and heading hierarchy all stay intact.

Roughly 68% of new WordPress installations in 2026 default to block-based architecture (Elementor, 2026), so the Group route works on most fresh sites without touching a stylesheet.

How Do You Indent Lists in WordPress?

Place the cursor at the start of a list item and press Tab. Shift+Tab promotes it back one level. The block toolbar carries matching Indent and Outdent buttons for anyone who prefers clicking.

Markers change automatically with depth: disc at level one, circle at level two, square at level three.

Ordered lists restart numbering at each new level rather than continuing the parent sequence. Nobody expects that the first time.

Three reasons a list refuses to indent:

• The cursor sits mid-item instead of at the very start
• The item is first in its list, so there is no sibling above it to nest under
• The theme reset list padding to zero, so nesting exists in the markup but shows no visible offset

In the Code Editor, a nested list lives inside the parent li element, never as a sibling ul. Getting that backwards throws a block validation error the moment you save.

Marker styles beyond the three defaults need custom rules, since the editor exposes no marker picker. Anything involving counters or custom bullets comes down to the list-style property and its variants.

How Do You Indent a Paragraph With CSS in WordPress?

Add the rule under Appearance, Editor, Styles, Additional CSS for block themes, or Customizer, Additional CSS for classic themes. Use text-indent for a first-line indent, padding-left or margin-left to shift the entire paragraph.

Rules written here survive theme updates as long as you use the Additional CSS panel rather than editing the theme stylesheet directly. Anyone new to styling pages with cascading rules should start here rather than in the code editor.

Unit choice matters more than people expect. The difference between font-relative and root-relative units decides whether your indent scales with the paragraph’s own size or stays pinned to the document root.

Adding a Custom Class to One Block

Advanced panel: open the block sidebar, scroll to Advanced, type a name into Additional CSS Class(es).

Rule: .indent-first { text-indent: 2em; }

Reuse: the class survives copy and paste, so one definition covers every paragraph you tag afterward.

Nothing wastes an afternoon faster than pasting the same inline style into forty paragraphs when a single class would have handled all of them.

Setting a Site-Wide Paragraph Indent

One selector covers the whole site: .entry-content p { text-indent: 2em; }

Theme stylesheets frequently load after custom CSS, which is why a rule that reads correctly does absolutely nothing on the page.

Raise weight before reaching for !important. Add the parent container to the selector, and settle the argument with a specificity score comparison rather than trial and error.

How Do You Create a Hanging Indent in WordPress?

Apply padding-left and a negative text-indent of the same value. The first line pulls back flush to the left margin while every wrapped line stays indented, which is exactly what a citation list needs.

The full rule is one line:

“ .hanging { padding-left: 2em; text-indent: -2em; } `

APA 7th edition specifies 0.5 inches (1.27 cm) for reference list entries, with the first line flush left (APA Style). MLA works-cited pages use the same measurement.

Half an inch equals 48px at the browser’s standard 96 DPI baseline. For anything less tidy, a pixel to inch conversion tool beats mental math.

Apply the class to a Group block wrapping the entire reference list. Every paragraph inside inherits the pattern without individual tagging.

The Quote block is not a substitute. It produces a left border and margin, a different effect entirely, and matching it to a citation format means writing your own blockquote styling rules anyway.

Test the wrap at 375px before publishing. A 2em negative indent on a narrow viewport can shove the first word past the visible edge.

How Do You Indent in the WordPress Classic Editor?

Click Toolbar Toggle or press Alt+Shift+Z to open the second toolbar row, then use Increase Indent and Decrease Indent. Each click shifts the selected paragraph by 30px. The buttons hide in row two by default, which is why most people swear they do not exist.

The Classic Editor plugin reports 9 million active installations as of May 2026 (WordPress.org). This toolbar is not a legacy curiosity.

Toolbar sequence:

• Click Toolbar Toggle, the last icon in row one, or hit Alt+Shift+Z
• Highlight the paragraph
• Click Increase Indent, which writes an inline padding-left declaration in 30px steps
• Click Decrease Indent to walk it back one step at a time

Advanced Editor Tools, formerly TinyMCE Advanced, carries over 2 million active installations and lets you drag the indent buttons permanently into row one.

The Blockquote button remains the fastest workaround when you need text pushed right and the semantics do not matter much.

Teams running Classic on archived posts and blocks on new ones handle this per post, which means switching the block editor back on selectively rather than site-wide.

How Do You Indent Using HTML in WordPress?

Open the Code Editor with Ctrl+Shift+Alt+M, or insert a Custom HTML block, then apply a style attribute to the paragraph tag. Semantic alternatives include blockquote and dd, both of which carry left indentation by browser default.

Inline styles typed into a paragraph block trigger the “this block contains unexpected or invalid content” warning. The saved markup no longer matches what the block’s save function expects.

The Custom HTML block sidesteps validation completely. Whatever you put in there ships exactly as written.

Two methods to avoid:

•   chains, which collapse unpredictably and read as nonsense to screen readers


• , which kills text wrapping and forces a monospace font you did not ask for

One trap that costs real debugging time: wpkses filters post content for Authors, Contributors, and Editors, stripping style attributes on save. Administrators never see this, so the bug report always arrives from somebody else.

Anyone editing markup directly should know how the markup language itself treats whitespace, since consecutive spaces collapse into one before the browser ever renders them.

How Do You Indent With Block Padding and Dimension Controls?

Open the block sidebar, find Dimensions, reveal Padding through the three-dot menu, then unlink the sides and enter a left value. The control writes an inline style onto the block wrapper, so it survives a theme switch and needs no CSS knowledge at all.

What the panel actually controls:

• Padding pushes content inward from the block edge, and a background color follows it
• Margin pushes the whole block outward, and the background stops at the edge
• The chain icon links all four sides, so unlink it before touching left alone

WordPress generates seven default spacing steps, exposed as –wp–preset–spacing–20 through –wp–preset–spacing–80, with each step multiplying the previous value by 1.5 (WordPress Developer Resources).

Preset values shift when the theme changes. Fixed pixel values do not, which is the entire argument for using presets on any site a client will inherit.

Group, Columns, and Cover all work as indent containers when the block you want to move has no padding control of its own.

A handful of core blocks expose margin but not padding. Wrap those in a Group and apply padding to the wrapper instead of fighting the block.

Vertical rhythm sits in a different panel entirely. Adjusting the gap between lines of text happens under Typography, not Dimensions.

How Do You Set Indentation Site-Wide With theme.json?

Add spacing declarations under styles.blocks in theme.json. A left padding on core/paragraph or core/list applies to every instance across the site, and the value pulls from your own spacing scale rather than a hardcoded number.

` { "version": 3, "styles": { "blocks": { "core/paragraph": { "spacing": { "padding": { "left": "var(--wp--preset--spacing--40)" } } } } } } `

Version 3 of the theme.json schema arrived with WordPress 6.6 and remains current as of 7.0.

Define your own scale under settings.spacing.spacingSizes when the generated 1.5 multiplier does not match your design system. Each entry takes a slug, a size, and a display name.

Accepted units include px, em, rem, %, vw, and vh. Anyone leaning on screen-relative measurements like vw and vh should test the extremes before committing, since a 5vw indent behaves very differently at 320px and 2560px.

Raw CSS goes in the styles.css property, which is the cleanest place for a hanging indent class that theme.json cannot express structurally.

The gotcha that costs people hours: Global Styles changes made in the Site Editor save to the database and take priority over every theme.json layer, including a child theme’s (WordPress Theme Handbook).

Put theme.json in the child theme root. A parent theme update overwrites its own copy without warning.

How Do You Indent in Elementor, Divi, and Other Page Builders?

Elementor keeps padding under Advanced, Layout. Divi puts it under Design, Spacing. Both write builder-specific CSS that overrides theme.json and Additional CSS, which explains why an indent set in the block editor vanishes on a builder-made page.

Elementor was detected on 32.67% of WordPress sites in the April 2026 HTTP Archive crawl, ahead of the block editor at 20.62%, wpBakery at 8.52%, and Divi at 5.72% (GravityKit).

The Elementor free plugin passed 10 million active installations on WordPress.org, which makes its padding field the most-used indent control in the entire ecosystem.

Divi is undercounted in plugin surveys because it ships primarily as a theme rather than a plugin, so detection tools miss most Divi sites.

Every builder above stores its values in post meta, not in your stylesheet. Deactivate the builder and the indentation disappears with it, which is the honest cost of layouts that adapt per device through a visual interface.

Why Does Indentation Not Show on the Front End?

Four causes cover nearly every case: the theme stylesheet resets padding on p and ul, a caching layer serves an outdated CSS file, editor styles never loaded publicly, or a competing selector wins on weight.

WP Rocket runs on over 3.5 million websites as of 2026 (GigaPress), and LiteSpeed Cache passed 1 million installations on WordPress.org. Purging one of them is the first move, not the last.

Cloudflare adds a second cache layer above the plugin. Clearing the plugin cache while the edge still holds the old stylesheet produces exactly the same symptom twice in a row.

Open DevTools, select the paragraph, and read the Computed panel. A struck-through padding-left in the Styles pane names the rule that beat yours, along with the file and line number.

Block validation errors strip inline styles the moment you save, so a paragraph that showed the warning banner in the editor loads clean on the front end.

If the stylesheet itself returns a 404, the browser console reports it before you waste time on specificity. Those resource loading failures point at a path or permissions problem, not a CSS problem.

How Do You Keep Indentation Readable on Mobile?

Swap fixed pixel indents for em, rem, or clamp() so the offset scales with the viewport. A 60px indent consumes 16% of a 375px screen, which turns a tidy desktop paragraph into a narrow column of broken lines.

Mobile devices generated 52.27% of global website traffic in Q1 2026 (StatCounter via Statista). Testing the indent on a phone is not an optional final step.

A rule like padding-left: clamp(1rem, 4vw, 3rem); holds a usable minimum on a phone and a generous maximum on a wide monitor. A clamp value calculator saves the arithmetic when you know the two viewport endpoints.

WordPress 7.0 hardcodes block visibility viewports at 480px and below for mobile, 480 to 782px for tablet, and above 782px for desktop (Gutenberg repository). The admin interface uses 600px and 782px, which is a separate set of numbers entirely.

Theme.json version 3 accepts an @mobile key on block style nodes, compiling to a max-width: 480px query without you writing the conditional CSS blocks by hand.

Nested lists compound fast. Three levels at 40px each puts the deepest item 120px from the left edge, roughly a third of a 375px screen.

The editor device preview renders tablet at 780px and mobile at 360px, both approximations. Load the page on an actual phone before publishing, which is the practical core of designing for the small screen first.

FAQ on How To Indent In WordPress

Why does the Tab key not indent text in WordPress?

Tab moves focus between blocks and toolbar controls rather than inserting an indent. Inside a list block, Tab nests the item. Inside a paragraph block, it does nothing, because paragraphs have no indent state to change.

How do you indent a paragraph in the block editor?

Select the paragraph, open the Settings sidebar, and find Dimensions. Reveal Padding through the three-dot menu, unlink the sides, then set a left value. Availability depends on whether your theme enables appearanceTools.

How do you indent bullet points in WordPress?

Put the cursor at the very start of the list item and press Tab. Shift+Tab promotes it back. The block toolbar carries matching Indent and Outdent buttons if you prefer clicking.

Why will my first bullet point not indent?

A list item cannot nest without a sibling above it. The first item in any list has no parent to attach to, so both Tab and the Indent button stay inert until a second item exists.

What CSS creates a first-line indent in WordPress?

Use text-indent, not padding. A rule like .entry-content p { text-indent: 2em; } in Additional CSS shifts only line one. Padding and margin move the entire paragraph instead.

How do you make a hanging indent for citations?

Combine padding-left: 2em with text-indent: -2em on the same class. APA and MLA both specify 0.5 inches, which lands near 2em at standard body text sizes.

Does the Classic Editor still have indent buttons?

Yes. Press Alt+Shift+Z or click Toolbar Toggle to open the second row, then use Increase Indent. Each click adds roughly 30px. The Classic Editor plugin still reports 9 million active installations.

Why does my indent disappear on the live site?

Three usual suspects: a caching plugin serving old CSS, editor-only styles that never loaded publicly, or a theme rule beating yours on specificity. Check DevTools for a struck-through declaration.

Can you indent using HTML in WordPress?

Yes, through the Custom HTML block or the Code Editor (Ctrl+Shift+Alt+M). Inline styles on a paragraph block trigger a block validation warning, and wpkses strips style attributes for non-administrator roles.

How do you indent every paragraph across the whole site?

Add one rule in Additional CSS, or declare left padding under styles.blocks.core/paragraph in theme.json. Site Editor Global Styles save to the database and override both, so check there first.

Conclusion

Figuring out how to indent in WordPress comes down to matching the method to the job rather than hunting for one missing button.

Nested lists need Tab. Whole blocks need the Dimensions panel or a Group wrapper.

Reference lists need a negative text-indent` paired with padding, and site-wide rules belong in theme.json or the Additional CSS panel where they survive updates.

Elementor and Divi users work in their own spacing fields, which quietly outrank everything in the Site Editor.

When an indent refuses to appear on the live page, purge the cache first, then open DevTools and read the Computed panel before rewriting anything.

Use rem or clamp() instead of fixed pixels, and check the result at 375px before you publish.