Avoid inline spacing

Moderate effort

Remove hard-coded text-spacing CSS properties from inline `style` attributes so users can override them with their own stylesheets.

What it is

Inline spacing refers to CSS properties like `line-height`, `letter-spacing`, `word-spacing`, and `margin-top`/`padding-top` (used to control text block spacing) that are written directly inside an HTML element's `style="…"` attribute rather than in a separate stylesheet. When these values are hard-coded inline, a user's browser or assistive-technology stylesheet cannot override them — even when that user has set their own spacing preferences to make text readable. WCAG 2.1 Success Criterion 1.4.12 ("Text Spacing") requires that users can adjust those four specific spacing properties without losing content or functionality.

Why it matters

Roughly 1 in 5 people have a disability that affects how they read text, and many of them rely on custom browser stylesheets or accessibility extensions that increase letter spacing, line height, or word spacing to make text legible. When your store hard-codes those values inline, their overrides are silently blocked, making your content unreadable for those shoppers — driving them directly to a competitor. Beyond lost sales, WCAG 2.1 Level AA compliance (which includes SC 1.4.12) is the baseline required by accessibility laws in the EU (EAA), UK (PSBAR), Canada (AODA), and increasingly enforced in the US under the ADA. Non-compliance exposes your business to legal complaints, demand letters, and lawsuits.

How to fix it

Audit your HTML source for elements that contain inline `style` attributes with any of these properties: `line-height`, `letter-spacing`, `word-spacing`, `margin-top`, `margin-bottom`, `padding-top`, or `padding-bottom` on text-containing elements.
For each violation, move the spacing declaration out of the `style` attribute and into your site's CSS stylesheet (e.g. a class rule, a theme stylesheet, or a global CSS file).
Replace the inline `style` attribute with a descriptive CSS class name (e.g. `class="product-description"`) and define the spacing in that class in your stylesheet.
If a page-builder, theme editor, or rich-text field is generating the inline style automatically, find the spacing/typography control inside that tool and clear or reset the value so it stops emitting the inline declaration.
Never use `!important` in your fix — the goal is to allow user stylesheets to override your values freely, which requires your rules to remain overridable.
After applying the fix, re-test with the axe browser extension or another WCAG checker to confirm the `avoid-inline-spacing` rule no longer flags those elements.

<!-- BEFORE: inline spacing blocks user overrides -->
<p style="line-height: 1.4; letter-spacing: 0.05em;">Product description text</p>

<!-- AFTER: spacing lives in the stylesheet, users can override it -->
<p class="product-description">Product description text</p>

/* In your stylesheet */
.product-description {
  line-height: 1.4;
  letter-spacing: 0.05em;
}

Fix it on your platform

Pick your platform for the exact steps.

How to fix avoid inline spacing on Shopify

Go to Online Store → Themes → Actions → Edit Code.
Search all `.liquid` template files and section files for `style=` attributes containing `line-height`, `letter-spacing`, `word-spacing`, or spacing-related `margin`/`padding` on text elements.
Cut the offending property out of the inline `style` attribute and add a CSS class to that element instead (e.g. `class="product-body"`).
Open `assets/base.css` (or your theme's main CSS file) and define the spacing rule there under that class name.
If a section's inline style is generated dynamically by a section schema setting (e.g. a 'Text size' range input), edit the schema to remove that setting or render it as a CSS variable applied via a stylesheet rule rather than a raw inline style.
For third-party apps injecting inline spacing, contact the app developer or use the Theme editor's Custom CSS box (Online Store → Themes → Customize → Theme Settings → Custom CSS) to add an overriding rule — though the real fix requires the app to stop emitting inline styles.

Full Shopify guide →Official Shopify docs ↗

How to fix avoid inline spacing on WooCommerce

In wp-admin, go to Appearance → Theme File Editor (or use a local code editor / FTP).
Search your active theme's template files (`single-product.php`, `archive-product.php`, page templates, etc.) for `style=` containing the flagged spacing properties.
Remove the inline property and add or extend a CSS class on that element.
Add the corresponding CSS rule to your child theme's `style.css` file (never edit the parent theme directly).
If a page builder (Elementor, Divi, Beaver Builder) generated the inline style, open that block/widget, find the Typography or Spacing panel, delete the custom spacing value, and save — the builder will stop emitting the inline style.
Verify via Appearance → Customize → Additional CSS or the axe DevTools browser extension.

Full WooCommerce guide →Official WooCommerce docs ↗

How to fix avoid inline spacing on BigCommerce

Go to Storefront → My Themes → Advanced → Edit Theme Files (Stencil CLI is recommended for larger edits).
Search `.html` template files and Handlebars partials for `style=` attributes with spacing properties on text elements.
Move the value into your theme's `assets/scss/` or `assets/css/` directory under an appropriate class rule.
Replace the inline `style` on the HTML element with the new class name.
For spacing set via Theme Editor (Storefront → My Themes → Customize), check Typography settings — if the editor is injecting inline styles, reset those fields to their defaults so the theme's stylesheet governs spacing instead.
Re-upload or push the updated theme and verify with axe.

Full BigCommerce guide →Official BigCommerce docs ↗

How to fix avoid inline spacing on Wix

Open the Wix Editor and click the text or element that has the inline spacing.
In the text toolbar, check for any custom Line Spacing, Letter Spacing, or Paragraph Spacing values set in the Text Settings panel (the 'A' icon) — clear or reset them to default.
For elements built with Wix Studio or custom code blocks (Velo), open the page code panel and locate any `style` object assignments on DOM elements that set `lineHeight`, `letterSpacing`, or `wordSpacing`; refactor these to CSS classes applied via `$w('#element').addClass('my-class')` and define the class in a site-level CSS file.
In Wix Studio, use the Design panel's Typography section to set spacing through design tokens rather than inline overrides.
Publish the site and re-test with the axe browser extension.

Full Wix guide →Official Wix docs ↗

How to fix avoid inline spacing on Squarespace

Go to Website → Pages, open the page, and click Edit on the text block with the inline spacing.
Highlight the text, open the text formatting toolbar, and look for any custom spacing set via the 'More' or Design options — remove it to revert to the site style.
For site-wide typography spacing, go to Design → Fonts and adjust Line Height / Letter Spacing there; this writes to the global stylesheet rather than inline styles.
If a Code Block or custom HTML injection is responsible, click Edit on that block, locate the `style=` attribute in the markup, move the spacing value to a `<style>` tag in the same block or to Design → Custom CSS, and remove the inline attribute.
Use Design → Custom CSS to add overriding class-based rules, then verify with axe.

Full Squarespace guide →Official Squarespace docs ↗

How to fix avoid inline spacing on Webflow

Open the Designer and select the element flagged for inline spacing.
In the Style panel (right sidebar), check the Typography section for any overrides to Line Height, Letter Spacing, or Word Spacing set directly on this element rather than on a class.
If the values are element-level overrides (shown in blue/highlighted), remove them by clicking the property and pressing Delete/Backspace, or by right-clicking the property and choosing 'Remove override'. This ensures the value comes from the class rule, not an inline style.
Define correct spacing values on the element's CSS class (create one if the element has none) so the rule lives in the stylesheet.
For CMS-driven content where spacing is set via a Rich Text block, apply global Rich Text styles in the Style panel on the Rich Text class rather than inside the editor.
Publish the site and verify with the axe browser extension.

Full Webflow guide →Official Webflow docs ↗

How to fix avoid inline spacing on Adobe Commerce (Magento)

Identify the template file responsible: check `app/design/frontend/<Vendor>/<Theme>/` for `.phtml` files or `.html` Knockout/UI-component templates that output `style=` with spacing properties.
In your custom child theme, create an override of the offending template (copy it to `app/design/frontend/<YourVendor>/<YourTheme>/`) and remove the inline spacing property from the `style` attribute.
Add a CSS class to the element and define the spacing in `web/css/source/_module.less` or `web/css/source/_extend.less` under that class.
If spacing is injected via a CMS block or Page Builder widget (in Commerce), go to Content → Blocks or Content → Pages, edit the block, switch to HTML view, find and remove the inline `style` spacing property, and instead apply a CSS class.
Run `bin/magento setup:static-content:deploy` and clear the cache (`bin/magento cache:flush`) to deploy updated styles.
Verify with axe DevTools.

Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗

Does your site have this issue?

Run a free SEOLZ audit to find avoid inline spacing — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Avoid inline spacing?

Why does avoid inline spacing matter?

How do I fix avoid inline spacing?