Secció 4: Posicionament CSS

3. Dimensions d'una caixa

3.4. Limitar les dimensions: min-width, max-width, min-height, max-height

Límits horitzontals

Les propietats min-width i max-width permeten restringir l'amplada d'una caixa a uns valos límit.

P {
width: 50%;
min-width: 20em;
max-width: 30em;
}

La sentència anterior assigna als paràgrafs una amplada del 50% respecte el seu bloc contenidor, sempre que no sigui inferior a 20em o superior a 30em.

Els valors permesos són longituds o percentatges, aquests darrers calculats respecte l'amplada del bloc contenidor. A més max-width accepta el valor none, que no fixa cap límit per a l'amplada de la caixa. Aquest és de fet el valor per defecte.

Limits verticals

De forma anàloga les propietats min-height i max-height estableixen els límits inferior i superior per a l'alçada d'una caixa.

Els valors permesos són també longituds o percentatges, referits ara a l'alçada del bloc contenidor. Com abans, max-height accepta none (valor per defecte).

Igual que width i height, les propietats que restringeixen les dimensions de les caixes no tenen cap efecte en els elements inline no reemplaçats (A, STRONG, SPAN...), però sí en els elements de bloc i en els elements inline reemplaçats.

Aquestes quatre propietats serien molt útils per a establir layouts dinàmics que s'adaptin a múltiples entorns... si no fos per què IE no les suporta, lamentablement. Si no et fa res que només els usuaris de navegadors com Mozilla o Opera se'n beneficiin, pots utilitzar-la lliurement. Realment és una pena que MS no puleixi aquest tipus de defectes en el seu navegador.