CSS: “width”: Demasiados valores o los valores no son reconocidos.

La propiedad CSS width establece el ancho de un elemento y acepta un solo valor. El validador W3C reporta este error cuando encuentra algo que no puede analizar como una declaración width válida. Las causas comunes incluyen:

• Unidades faltantes: Escribir width: 300 en lugar de width: 300px. CSS requiere unidades explícitas para longitudes diferentes de cero.
• Múltiples valores: Escribir width: 100px 200px como si width aceptara múltiples valores al estilo abreviado (no lo hace).
• Errores tipográficos o palabras clave inválidas: Escribir width: auot en lugar de width: auto, o usar una palabra clave inventada.
• Funciones o sintaxis inválidas: Usar sintaxis de función incorrecta como width: calc(100% - 20px) con espacios faltantes alrededor de operadores, o usar valores con prefijos de navegador sin una alternativa estándar.
• Valores no soportados: Usar valores CSS más nuevos como fit-content o max-content en un contexto donde el nivel CSS del validador no los reconoce.

Esto es importante porque CSS inválido puede hacer que los navegadores descarten silenciosamente toda la declaración, lo que significa que tu diseño previsto no se aplicará. Diferentes navegadores pueden manejar valores inválidos de manera diferente, llevando a renderizado inconsistente. Mantener tu CSS válido asegura comportamiento predecible y entre navegadores.

Valores válidos para width

La propiedad width acepta exactamente uno de los siguientes:

• Valores de longitud: Un número con una unidad, como 300px, 25em, 10rem, 5vw.
• Valores de porcentaje: Un porcentaje relativo al bloque contenedor, como 75%.
• Valores de palabra clave: auto, max-content, min-content, fit-content.
• Valores de función: fit-content(20em), calc(100% - 40px), min(300px, 100%), max(200px, 50%), clamp(200px, 50%, 600px).
• Valores globales: inherit, initial, revert, revert-layer, unset.

Ten en cuenta que 0 es el único valor numérico que no requiere una unidad.

Ejemplos

Incorrecto: unidad faltante

<style>
  .box {
    width: 300;
  }
</style>
<div class="box">Contenido</div>

Un número simple (diferente de 0) no es válido. El navegador no sabrá si te refieres a píxeles, ems, o algo más.

Correcto: unidad proporcionada

<style>
  .box {
    width: 300px;
  }
</style>
<div class="box">Contenido</div>

Incorrecto: demasiados valores

<style>
  .sidebar {
    width: 200px 400px;
  }
</style>
<aside class="sidebar">Barra lateral</aside>

A diferencia de propiedades como margin o padding, width solo acepta un valor único.

Correcto: valor único

<style>
  .sidebar {
    width: 200px;
  }
</style>
<aside class="sidebar">Barra lateral</aside>

Incorrecto: error tipográfico en palabra clave

<style>
  .container {
    width: auot;
  }
</style>
<div class="container">Contenido</div>

Correcto: palabra clave apropiada

<style>
  .container {
    width: auto;
  }
</style>
<div class="container">Contenido</div>

Incorrecto: expresión calc() mal formada

<style>
  .panel {
    width: calc(100%-40px);
  }
</style>
<div class="panel">Contenido</div>

La función calc() requiere espacios alrededor de los operadores + y -.

Correcto: expresión calc() con espacios apropiados

<style>
  .panel {
    width: calc(100% - 40px);
  }
</style>
<div class="panel">Contenido</div>

Incorrecto: punto y coma accidental o texto extra

<style>
  .card {
    width: 50% important;
  }
</style>
<div class="card">Contenido</div>

Si intentabas usar !important, el ! es requerido.

Correcto: sintaxis !important apropiada

<style>
  .card {
    width: 50% !important;
  }
</style>
<div class="card">Contenido</div>

Encuentra problemas como este automáticamente

Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.

Iniciar prueba gratuita Ver precios