Disponemos de dos propiedades fundamentales que nos permiten fijar el ancho y el alto de un elemento HTML:
width height
Cuando no se fija el ancho de un elemento HTML la propiedad toma el valor por defecto que es "auto" por lo que el navegador tiene que calcular el ancho teniendo en cuenta el contenido del elemento y el espacio disponible.
Por el momento hemos visto solo la medida en píxeles y porcentajes (luego veremos que podemos utilizar otras unidades de medida para fijar el ancho y el alto de un elemento)
Otras cuatro propiedades relacionadas con el ancho y el alto de un elemento HTML son:
min-width max-width min-height max-height
Veamos un ejemplo:
<!DOCTYPE html> <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="cabecera"> Blog del Programador </div> </body> </html>
Solamente hemos definido un div donde mostramos la cabecera de una página.
La hoja de estilo definida:
#cabecera {
width:100%;
height:100px;
background-color:#ffee00;
color:#0000aa;
text-align:center;
font-family:Times New Roman;
font-size:50px;
font-weight:bold;
}
La propiedad width la inicializamos con el valor 100%, lo que significa que ocupará todo el ancho de la página (podemos inicializarlo en pixeles si lo necesitamos). Luego a la propiedad height la inicializamos en 100 píxeles.
El resto de propiedades son las ya vistas en conceptos anteriores.
Es decir que las propiedades width y height nos permiten dar una dimensión al elemento HTML ya sea con valores absolutos indicados en pixeles o relativos indicados por porcentajes.