Compartir a través de


max-width

Establece el ancho máximo para un elemento.

Sintaxis

{ max-width: sMaxWidth }

Valores posibles

sMaxWidth

Variante que especifica o recibe el ancho máximo para un elemento:

longitud

Número de punto flotante seguido de un designador de unidades absolutas (cm, mm, in, pt o pc) o de un designador de unidades relativas (em, ex o px).

Para obtener más información acerca de las unidades de longitud admitidas, vea Referencia de unidades de longitud.

porcentaje

Entero seguido de un signo de porcentaje (%) y que especifica el porcentaje del ancho del bloque donde está incluido el elemento que se va a usar como ancho máximo del elemento. Si el ancho del bloque donde está incluido el elemento no se establece de forma explícita, el elemento no tiene ancho máximo y la propiedad max-width se interpreta como 0%. Para obtener información sobre los bloques que incluyen elementos y cómo se calcula su ancho, vea la especificación Cascading Style Sheets (CSS), Level 2, Revision 1 (CSS2.1) (Hojas de estilos en cascada (CSS), nivel 2, revisión 1 (CSS2.1)).

La propiedad no tiene un valor predeterminado. No se hereda.

Observaciones

Los atributos min-width y max-width se aplican a los elementos a nivel de bloque flotante y con posicionamiento absoluto, a los elementos inline-block y a algunos controles intrínsecos. No se aplican a elementos en línea no reemplazados, como filas de tabla y grupos de filas o columnas. (Un elemento "reemplazado" tiene dimensiones intrínsecas, como un elemento IMG o un elemento TEXTAREA.)

Esta propiedad solo está habilitada bajo !DOCTYPE estricto.

Ejemplo

En el siguiente ejemplo se muestra cómo limitar el ancho de un elemento DIV con los atributos min-width y max-width. El ejemplo solo se puede ver con Internet Explorer 7 o una versión posterior:

<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Strict//EN">
<html>
<head><style>
.width {
    width:50%;
    min-width:200px;
    max-width:400px;
    background:#eee;
}
.content {
    border :1px solid #c00;
    padding:5px;
}
</style>
</head>
<body>
<div class="width">
<div class="content">
        <h2>{min-width:200px; max-width:400px}</h2>
        <p>This div also has a width of 50%. Resize the window
         to grow and shrink the div from max to min width.<br/><br/>
         The outer div controls the width of the inner "content" div.
         Note that the div height increases to accomodate the flow of text.</p>
</div>
</div>
</body>
</html>

Información sobre estándares

Esta propiedad se define en la especificación Cascading Style Sheets (CSS), Level 2 (CSS2) (Hojas de estilos en cascada (CSS), nivel 2 (CSS2)).

Aplicable a

A, ABBR, ACRONYM, ADDRESS, APPLET, B, BDO, BIG, BLOCKQUOTE, BUTTON, CAPTION, CENTER, CITE, CODE, CUSTOM, DD, DEL, DFN, DIV, DL, DT, EM, FIELDSET, FONT, FORM, HN, HR, I, IMG, INPUT TYPE=BUTTON, INPUT TYPE=CHECKBOX, INPUT TYPE=FILE, INPUT TYPE=IMAGE, INPUT TYPE=PASSWORD, INPUT TYPE=RADIO, INPUT TYPE=RESET, INPUT TYPE=SUBMIT, INPUT TYPE=TEXT, INS, LI, OL, OPTION, P, Q, RT, RUBY, S, SELECT, SPAN, SUB, TT, U, UL, VAR, XMP

Vea también

Conceptos

min-width

width

min-height

max-height