How to fix avoid inline spacing on Webflow

Steps for Webflow

1. Open the Webflow Designer and select the element flagged with inline spacing.
2. 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.
3. 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.
4. 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'.
5. Publish the site and verify in the browser with axe DevTools that no `avoid-inline-spacing` violations remain.
6. 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.

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.

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.

See the complete Avoid inline spacing guide for every platform and the full background.