HTML Validation

CSS: “gap”: “auto” is not a “gap” value.

About This HTML Issue

The gap property in CSS does not accept auto as a valid value.

The gap property is used with CSS Grid and Flexbox layouts to define the spacing between grid tracks or flex items. Acceptable values for gap include length values such as px, em, %, or keywords such as normal. The value auto is not valid for the gap property; instead, use valid length units or the normal keyword.

Correct usage:

<div style="display: grid; gap: 16px;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Incorrect usage (produces a validation error):

<div style="display: grid; gap: auto;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

For responsive or dynamic spacing, set the gap property to a valid length (e.g., 1rem, 10px, 5%) or use media queries to adjust spacing at different breakpoints.

Learn more:

→ MDN Web Docs: gap

Last reviewed: May 06, 2025

Was this guide helpful?

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing

Related W3C Validator Issues

CSS: Deprecated media feature “max-device-width”. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

Replace device-based media features with viewport-based features; use max-width instead of max-device-width.

max-device-width and min-device-width were removed from modern media queries because they target physical device dimensions, not the browser viewport. They fail on high‑DPI screens, resizable windows, and zoom scenarios. Use viewport-relative features like width, min-width, and max-width, which respond to the layout viewport and are supported across browsers. For device pixel density, prefer resolution (e.g., min-resolution: 2dppx) instead of -webkit-min-device-pixel-ratio. Keep breakpoints content-driven; pick sizes where your layout needs to adapt, not specific devices.

HTML Examples

Example causing the validator warning

<!doctype html>
<html lang="en">
<head>
  <title>Deprecated Media Feature</title>
  <style>
    /* Deprecated: targets device width, not viewport */
    @media only screen and (max-device-width: 480px) {
      body {
        background: pink;
      }
    }
  </style>
</head>
<body>
  <p>Deprecated media feature example.</p>
</body>
</html>

Fixed example using viewport-based queries

<!doctype html>
<html lang="en">
<head>
  <title>Viewport-Based Media Query</title>
  <style>
    /* Recommended: respond to viewport width */
    @media (max-width: 480px) {
      body {
        background: pink;
      }
    }

    /* Optional: high-DPI tweak using resolution */
    @media (min-width: 481px) and (min-resolution: 2dppx) {
      body {
        background: lightblue;
      }
    }
  </style>
</head>
<body>
  <p>Fixed media feature example.</p>
</body>
</html>

CSS: Deprecated media feature “min-device-width”. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

Replace device-based media features like min-device-width with viewport-based features such as min-width.

The min-device-width and max-device-width media features are deprecated in Media Queries Level 5 and are flagged by validators. They target the physical device screen, which is unreliable across modern devices and zoom settings. Use min-width/max-width to respond to the layout viewport instead. This aligns with responsive design best practices and works consistently with zoom, orientation changes, and different device pixel ratios.

Common replacements:

@media (min-device-width: X) → @media (min-width: X)
@media (max-device-width: X) → @media (max-width: X)
If you were targeting pixel density, prefer resolution (e.g., min-resolution: 2dppx) or feature queries as needed.

HTML Examples

Example causing the warning

<!doctype html>
<html lang="en">
<head>
  <title>Deprecated media feature example</title>
  <style>
    /* Deprecated: targets physical device width */
    @media screen and (min-device-width: 768px) {
      .card { padding: 24px; }
    }
  </style>
</head>
<body>
  <div class="card">Content</div>
</body>
</html>

Fixed example (viewport-based)

<!doctype html>
<html lang="en">
<head>
  <title>Viewport-based media queries</title>
  <style>
    /* Recommended: targets the layout viewport width */
    @media (min-width: 768px) {
      .card { padding: 24px; }
    }

    /* Optional: high-density displays */
    @media (min-width: 768px) and (min-resolution: 2dppx) {
      .card { border: 1px solid #ccc; }
    }
  </style>
</head>
<body>
  <div class="card">Content</div>
</body>
</html>

CSS: “border-style”: “thick” is not a “border-style” value.

border-style does not accept thick as a value; it should be set to values like solid, dashed, or dotted, while thick is a valid border-width value.

The CSS property border-style determines the style of the border, such as whether it is solid, dashed, double, etc.

Acceptable values include none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset. The keyword thick is not valid for border-style; instead, it can be used with border-width to indicate a thicker border.

To achieve a thick solid border, set border-style to solid and border-width to thick.

Incorrect HTML Example:

<div style="border-style: thick;"></div>

Correct HTML Example:

<div style="border-style: solid; border-width: thick;"></div>

Or, if you want to specify a custom thickness:

<div style="border-style: solid; border-width: 5px;"></div>

The combination ensures that the border both displays in a solid style and is rendered at the desired thickness.

CSS: “background”: “from” is not a valid color 3 or 6 hexadecimals numbers.

background CSS property has an invalid value; "from" is not recognized as a valid color or background value.

The background property in CSS can accept color names, hex codes, rgb/rgba values, or CSS keywords, but "from" is not valid. Sometimes this error can appear if using incorrect CSS gradient syntax, where "from" is not a recognized value.

Detailed Explanation

In standard HTML and CSS, a background can be set using:

Hex color codes, such as #fff or #ffffff
Named colors, such as red or blue
Functions, such as rgb(255,0,0) or linear-gradient(...)

If you wrote something like:

background: from #fff to #000;

background: "from";

neither is valid CSS.

To use gradients, use correct linear-gradient() or radial-gradient() syntax:

background: linear-gradient(to right, #fff, #000);

For a solid color:

background: #fff;

HTML Examples

Incorrect CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Incorrect CSS</title>
  <style>
    div {
      background: from #fff to #000; /* Invalid syntax */
    }
  </style>
</head>
<body>
  <div>Bad background</div>
</body>
</html>

Correct CSS (Gradient):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Correct CSS Gradient</title>
  <style>
    div {
      background: linear-gradient(to right, #fff, #000);
    }
  </style>
</head>
<body>
  <div>Good background</div>
</body>
</html>

Correct CSS (Solid Color):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Correct CSS Color</title>
  <style>
    div {
      background: #fff;
    }
  </style>
</head>
<body>
  <div>White background</div>
</body>
</html>

Always use a valid color value or gradient function for the background property.

CSS: “background”: The first argument to the “linear-gradient” function should be “to top”, not “top”.

Use the correct direction keyword syntax in CSS gradients: replace top with to top.

In CSS Images Level 4, the first argument of linear-gradient() should either be an angle (e.g., 180deg) or a direction using the to keyword (e.g., to top, to right). Older syntax like linear-gradient(top, ...) is no longer valid and triggers validator errors. Valid forms include: linear-gradient(to top, #fff, #000), linear-gradient(180deg, #fff, #000), or simply omit the direction to default to to bottom. Keep gradients in your CSS, not HTML attributes. The style attribute or a stylesheet can set the background or background-image with a valid gradient function.

HTML Examples

Example showing the issue

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Gradient Issue</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background: linear-gradient(top, #ffffff, #000000); /* invalid */
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

Fixed example (valid syntax)

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Gradient Fixed</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        /* Option A: direction keyword */
        background: linear-gradient(to top, #ffffff, #000000);
        /* Option B: angle (equivalent) */
        /* background: linear-gradient(0deg, #ffffff, #000000); */
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

Ready to validate your sites?
Start your free trial today.

Pro Trial Free Trial