Propiedad min-width de CSS

La propiedad min-width establece el ancho mínimo de un elemento. Esta propiedad impide que el valor de la propiedad width sea menor que el valor especificado para min-width.

Ten en cuenta que, cuando se usa junto con las propiedades width y max-width, min-width actúa como un límite inferior. El ancho calculado se limita entre min-width y max-width, anulando el valor de width si cae fuera de ese rango.

La propiedad acepta una longitud CSS (px, pt, em, etc.) o un porcentaje.

INFO

Los valores de longitud negativos no son válidos.

Valor inicial	0
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.minWidth = "200px";

Sintaxis

Sintaxis de la propiedad min-width de CSS

css

min-width: <length> | <percentage> | initial | inherit;

Ejemplo de la propiedad min-width:

Ejemplo de la propiedad CSS min-width con valor en px

html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the document</title>
    <style>
      div {
        width: 10px;
        min-width: 70%;
        background-color: #1c87c9;
        color: #ffffff
      }
    </style>
  </head>
  <body>
    <div>The min-width of this text is defined as 70%.</div>
  </body>
</html>

Try it Yourself »

Resultado

CSS min-width Property

Aquí el ancho mínimo del elemento es 10 cm:

Ejemplo de la propiedad min-width especificada en "cm":

Ejemplo de la propiedad CSS min-width con valor en cm

html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the document</title>
    <style>
      span {
        background-color: #ccc;
        min-width: 0;
      }
      .example {
        min-width: 10cm;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h2>Min-width property example</h2>
    <h3>Min-width: 0:</h3>
    <span>Minimum width is set to 0.</span>
    <h3>min-width: 10cm:</h3>
    <span class="example">Minimum width is set to 10cm.</span>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción	Probarlo
length	Define el ancho mínimo en px, pt, cm, etc. El valor predeterminado es 0.	Probarlo »
%	Establece el ancho mínimo 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

¿Cuál es la funcionalidad de la propiedad 'min-width' en CSS?

Permite definir el ancho mínimo de un elementoPermite definir el ancho máximo de un elementoPermite definir la altura mínima de un elementoAyuda a evitar que los valores de la propiedad 'width' sean menores a los especificadosAyuda a rotar un elemento

Propiedad min-width de CSS ​

Sintaxis ​

Ejemplo de la propiedad min-width: ​

Resultado ​

Ejemplo de la propiedad min-width especificada en "cm": ​

Valores ​