Avoid inline spacing
Moderate effortFound on 1% of audited stores.
Remove hard-coded text-spacing CSS values from inline `style` attributes so users can override them with their own stylesheets or browser settings.
What it is
When spacing properties like `line-height`, `letter-spacing`, `word-spacing`, or `margin-top`/`padding-top` are written directly onto an HTML element using a `style="..."` attribute, they become "locked in" — they cannot be overridden by a user's custom browser stylesheet or accessibility tool. WCAG 2.1 Success Criterion 1.4.12 (Text Spacing) requires that users can adjust these four specific spacing properties without losing content or functionality. Inline styles break that guarantee because they have the highest CSS specificity, overriding even `!important` rules in many situations. The fix is to move those spacing values into an external or internal stylesheet (a CSS class), where they can be adjusted by assistive tools and user stylesheets.
Why it matters
People with dyslexia, low vision, or cognitive disabilities often rely on browser extensions or operating-system settings that increase line height, letter spacing, or word spacing to make text readable. When your store hard-codes these values as inline styles, those overrides are silently blocked — text can become unreadable or overlap other content, directly causing a visitor to abandon your store. This is a WCAG 2.1 Level AA failure, meaning it exposes you to legal risk under regulations like the ADA (US), EN 301 549 (EU), and the UK Equality Act. It also affects the growing number of accessibility-overlay tools that customers use. Fixing it broadens your potential customer base, reduces legal exposure, and signals to search engines and auditors that your site meets modern quality standards.
How to fix it
- Identify every HTML element on your pages that carries a `style` attribute containing any of these four properties: `line-height`, `letter-spacing`, `word-spacing`, or `margin-top` / `padding-top` (when used to control text spacing).
- Create a CSS class for each distinct spacing value you need — for example `.product-description { line-height: 1.6; letter-spacing: 0.05em; }` — in your theme's external stylesheet or a `<style>` block in the `<head>`.
- Replace the inline `style` attribute on each affected element with the corresponding CSS class name (`class="product-description"` instead of `style="line-height:1.6;"`).
- Verify that the visual result looks identical to before, then test with the browser's developer tools by injecting the WCAG 1.4.12 bookmarklet (sets line-height to 1.5×, letter-spacing to 0.12em, word-spacing to 0.16em) and confirm no text overlaps or disappears.
- Re-run your accessibility scanner (axe, WAVE, or Lighthouse) to confirm the `avoid-inline-spacing` rule no longer triggers.
- If a third-party app or page builder is generating the inline styles, find the styling controls within that tool and set spacing there, or add a CSS override class through the platform's custom CSS field.
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 → click the three-dot menu next to your active theme → Edit code.
- Open the relevant template file (e.g. `templates/product.liquid`, `sections/featured-product.liquid`) and search for `style=` to locate inline spacing properties.
- Open `assets/base.css` (or your theme's main CSS file, often `assets/theme.css`) and add a new CSS class with the spacing values.
- Back in the template file, replace the `style="..."` attribute with `class="your-new-class"` on each affected element.
- Save both files. Preview the theme and use the axe browser extension to confirm the rule is resolved.
- If a Shopify app (page builder, reviews widget, etc.) injects the inline styles, use the app's own style settings, or add a corrective rule in Online Store → Themes → Customize → Custom CSS (or `assets/custom.css`).
How to fix avoid inline spacing on WooCommerce
- In WordPress admin, go to Appearance → Theme File Editor (or use a code editor via FTP/SFTP).
- Open the template file containing the inline styles — commonly `woocommerce/single-product.php` or a block template — and search for `style=`.
- Add your CSS class definitions to your child theme's `style.css` (never edit the parent theme directly).
- Replace each inline `style` attribute with the matching class name in the template.
- If the inline style is coming from the Block Editor (Gutenberg), select the block, go to Block settings → Advanced → Additional CSS class, and style it via `style.css`; remove any spacing values set in the block's Typography panel that output as inline styles.
- Use the axe DevTools browser extension to verify the issue is resolved after saving.
How to fix avoid inline spacing on BigCommerce
- Go to Storefront → My Themes → click Customize on your active theme → click Advanced → Edit Theme Files (opens the Stencil file editor).
- Search template files (e.g. `templates/pages/product.html`, `templates/components/`) for `style=` attributes containing spacing properties.
- Open the theme's main SCSS/CSS file (typically `assets/scss/`) and define a new class with the spacing values.
- Replace the inline `style` attributes in the templates with the new class.
- Alternatively, use Storefront → My Themes → Customize → Page Builder and remove any inline spacing set in the visual editor's typography options, then define those values in the custom CSS field under Storefront → Script Manager or the theme's custom CSS section.
- Preview and run an axe scan to verify.
How to fix avoid inline spacing on Wix
- Open the Wix Editor and select the element that has the fixed text spacing.
- In the Design panel on the right, look for Text Settings / Typography options — avoid setting spacing values using the inline style sliders if they produce locked values.
- Go to the site's global CSS via Settings → Custom Code (or use Wix Studio's CSS Variables panel) and define a class with the desired spacing.
- For Wix Studio: open the CSS panel, write a class rule, and apply the class to the element via the Properties panel — this outputs a class rather than an inline style.
- If a Wix app (e.g. a reviews or product widget) generates the inline style, check the app's design settings; if no override is possible, add a corrective rule in the site's Custom CSS that targets the element with sufficient specificity (e.g. `.my-widget p { line-height: 1.5 !important; }`) to allow user overrides to win.
- Re-publish and verify with axe DevTools in the browser.
How to fix avoid inline spacing on Squarespace
- In the Squarespace editor, go to Design → Custom CSS (available on Business plan and above).
- Identify which block or section is outputting the inline spacing — use browser DevTools to find the element and its selector.
- Write a CSS rule in the Custom CSS panel that targets that element using its class or selector, setting the spacing properties you need (e.g. `.product-description p { line-height: 1.6; }`). This creates a stylesheet-level rule users can override.
- In the page editor, avoid using the 'Design' panel sliders for line-height/letter-spacing if they output as `style=` attributes — prefer Custom CSS for fine-grained spacing.
- If a third-party block or Code Block is injecting inline styles, edit the Code Block's HTML directly and move the spacing into a `<style>` tag or your Custom CSS.
- Save and verify with the axe browser extension.
How to fix avoid inline spacing on Webflow
- Open the Webflow Designer and select the element flagged with inline spacing.
- In the Style panel on the right, check Typography → Line Height, Letter Spacing, Word Spacing — these should be set on a CSS class, not as inline overrides.
- Click the element's class name at the top of the Style panel. If the spacing is set as an inline 'combo class' override with no class applied, create a new class (e.g. `product-body`) and set the spacing values on that class instead.
- Remove any spacing values that are set as element-level overrides (shown with an orange dot in the Style panel) by right-clicking them and selecting 'Remove style'.
- Publish the site and verify in the browser with axe DevTools that no `avoid-inline-spacing` violations remain.
- For CMS-bound elements, edit the Collection page template in the Designer using the same class-based approach — the same class applies to all dynamic items.
How to fix avoid inline spacing on Adobe Commerce (Magento)
- SSH into your server (or use your IDE) and search your active theme's template files for inline spacing: `grep -r 'style=' app/design/frontend/YourVendor/YourTheme/`.
- Create or open your theme's `web/css/_module.less` (or `_extend.less`) and define a CSS class with the required spacing values.
- In the corresponding `.phtml` template file, replace the `style="..."` attribute with `class="your-class"` on the affected element.
- Run `bin/magento setup:static-content:deploy` and clear the cache with `bin/magento cache:clean` to ensure the new CSS is compiled and served.
- If a third-party extension's template is the source, copy the template into your custom theme directory (following Magento's theme override pattern) and make the change there — never edit vendor files directly.
- Verify with the axe browser extension on the front end.
How to fix avoid inline spacing on Headless / Custom (I build in code)
- Search your component files and templates for `style=` props/attributes containing `lineHeight`, `letterSpacing`, `wordSpacing`, or spacing-related `margin`/`padding`.
- Move those values into a CSS/SCSS class, a CSS custom property, or a design-token in your stylesheet (or Tailwind utility class if using a utility framework).
- In React/Vue/Svelte etc., replace `style={{ lineHeight: '1.6' }}` with `className="product-body"` and define `.product-body { line-height: 1.6; }` in your stylesheet.
- For CSS-in-JS (styled-components, Emotion), ensure spacing is applied via the component's static styles, not dynamically injected `style` tags that behave like inline overrides.
- Run the axe-core library in your test suite (`@axe-core/react` or similar) to catch regressions automatically in CI.
- Manually test by bookmarking the WCAG 1.4.12 text-spacing test bookmarklet and verifying no content is clipped or overlaps after applying it.
Does your site have this issue?
Run a free SEOLZ scan to find avoid inline spacing — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Avoid inline spacing?
When spacing properties like `line-height`, `letter-spacing`, `word-spacing`, or `margin-top`/`padding-top` are written directly onto an HTML element using a `style="..."` attribute, they become "locked in" — they cannot be overridden by a user's custom browser stylesheet or accessibility tool. WCAG 2.1 Success Criterion 1.4.12 (Text Spacing) requires that users can adjust these four specific spacing properties without losing content or functionality. Inline styles break that guarantee because they have the highest CSS specificity, overriding even `!important` rules in many situations. The fix is to move those spacing values into an external or internal stylesheet (a CSS class), where they can be adjusted by assistive tools and user stylesheets.
Why does avoid inline spacing matter?
People with dyslexia, low vision, or cognitive disabilities often rely on browser extensions or operating-system settings that increase line height, letter spacing, or word spacing to make text readable. When your store hard-codes these values as inline styles, those overrides are silently blocked — text can become unreadable or overlap other content, directly causing a visitor to abandon your store. This is a WCAG 2.1 Level AA failure, meaning it exposes you to legal risk under regulations like the ADA (US), EN 301 549 (EU), and the UK Equality Act. It also affects the growing number of accessibility-overlay tools that customers use. Fixing it broadens your potential customer base, reduces legal exposure, and signals to search engines and auditors that your site meets modern quality standards.
How do I fix avoid inline spacing?
Remove hard-coded text-spacing CSS values from inline `style` attributes so users can override them with their own stylesheets or browser settings.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI