Propiedad max-width de CSS

La propiedad max-width se utiliza para establecer el ancho máximo de un elemento.

Esta propiedad evita que el valor de la propiedad width sea mayor que el valor especificado para max-width.

Por otro lado, la propiedad max-width anula la propiedad width, y la propiedad CSS min-width anula la propiedad max-width.

Valor inicial	none
Se aplica a	Todos los elementos, excepto elementos en línea no reemplazados, filas de tabla y grupos de filas.
Heredable	No.
Animable	Sí. El ancho es animable.
Versión	CSS2
Sintaxis DOM	object.style.maxWidth = "500px";

Sintaxis

Sintaxis de la propiedad max-width de CSS

css

max-width: none | length | initial | inherit;

Ejemplo de la propiedad max-width:

Ejemplo de la propiedad CSS max-width con valor en %

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        max-width: 50%;
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Max-width property example</h2>
    <div>The max-width of this text is defined as 50%.</div>
  </body>
</html>

Try it Yourself »

Resultado

Propiedad CSS max-width

Ejemplo de la propiedad max-width definida como "px" y "em":

Ejemplo de la propiedad CSS max-width con valores en px y em

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        max-width: 250px;
        background-color: #8ebf42;
      }
      p {
        max-width: 20em;
        background-color: #ccc;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>Max-width property example</h2>
    <div>The max-width of this div element is defined as 250px.</div>
    <p>The max-width of this paragraph is defined as 20em.</p>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción	Probarlo
auto	Establece el ancho máximo. Es el valor predeterminado de esta propiedad.	Probarlo »
length	Define el ancho máximo en px, pt, cm, etc. El valor predeterminado es 0.	Probarlo »
%	Establece el ancho máximo en % del elemento contenedor.	Probarlo »
initial	Hace que la propiedad use su valor predeterminado.	Probarlo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué hace la propiedad CSS max-width?

Evita que el valor utilizado de la propiedad width sea mayor que el valor especificado por max-width.Aumenta el ancho de un elemento hasta el valor máximoEstablece un ancho mínimo para un elementoLimita el ancho máximo de los elementos hijos dentro de un contenedor padre.Aumenta el relleno dentro de un elemento.

Propiedad max-width de CSS ​

Sintaxis ​

Ejemplo de la propiedad max-width: ​

Resultado ​

Ejemplo de la propiedad max-width definida como "px" y "em": ​

Valores ​