Anchura e altura

img#mia { width: 300px; }

div { width: auto; }

header { width: 960px; }

img#mia { height: 300px; }

div { height: auto; }

header { height: 960px; }

Anchura e altura máximos

En ocasións, pode ser útil non establecer de forma explícita a anchura e altura dos elementos pero si fixar unha altura ou anchura máxima. No seguinte exemplo, o primeiro <p> non ten establecida anchura máxima polo que ocupa todo o espazo dispoñible no elemento que o contén.

Non obstante, o segundo <p> ten establecida unha anchura máxima de 400px. Se reducimos o tamaño da ventá do navegador, os dous <p> reducen o seu tamaño para adaptarse ao novo sitio dispoñible. Non obstante, ao aumentar o tamaño da ventá do navegador, o primeiro<p> ocupa todo o sitio dispoñible e o segundo <p> non crece máis alá dos 400px establecidos.

Exemplo 01: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor in neque nec placerat. Phasellus sagittis, est vitae cursus blandit, magna eros rhoncus leo, id pretium tortor erat ac nunc.

Exemplo 02 (max-width: 400px): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor in neque nec placerat. Phasellus sagittis, est vitae cursus blandit, magna eros rhoncus leo, id pretium tortor erat ac nunc.

Un dos usos típicos de é o de limitar a anchura máxima das páxinas web. Co uso de pantallas e resolucións cada vez maiores, complícase a creación de páxinas web cuxa anchura se adapta dinamicamente. 

img#mia { max-width: 300px; }

div { max-width: none; }

header { max-idth: 960px; }

img#mia { max-height: 300px; }

div { max-height: none; }

header { max-height: 960px; }

Anchura e altura mínimos

Por defecto, os elementos de bloque ocupan toda a anchura dispoñible no elemento que os contén. Desta forma, se se reduce o tamaño da ventá do navegador, o sitio dispoñible diminúe e a anchura dos elementos de bloque é menor.

Se utilizamos anchura ou altura mínimas pódese forzar a que un elemento só reduza a súa anchura ata certo límite, a partir do cal a súa anchura xa non diminúe.

No seguinte exemplo, os dous <p> ocupan todo o sitio dispoñible en cada momento. Se reducimos o tamaño da fiestra do navegador, os dous <p> reducen o seu tamaño para adaptarse ao novo sitio dispoñible, pero, neste caso, o segundo <p> ten establecida unha anchura mínima de 900px, de modo que a partir dese valor non reduce a súa anchura aínda que o sitio dispoñible siga reducíndose.

Exemplo 01: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor in neque nec placerat. Phasellus sagittis, est vitae cursus blandit, magna eros rhoncus leo, id pretium tortor erat ac nunc.

Exemplo 02 (min-width: 900px): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor in neque nec placerat. Phasellus sagittis, est vitae cursus blandit, magna eros rhoncus leo, id pretium tortor erat ac nunc.

img#mia { min-width: 300px; }

div { min-width: none; }

header { min-idth: 960px; }

img#mia { min-height: 300px; }

div { min-height: none; }

header { min-height: 960px; }