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
- min-width Fija el ancho mínimo que puede tomar el elemento HTML (si reducimos el ancho del navegador a un valor menor a este veremos que aparece la barra de scroll en forma horizontal, es decir el elemento no puede tomar un valor menor a este)
- max-width Fija el ancho máximo que puede tomar el elemento HTML (es útil en los casos de aquellos elementos HTML que muestran texto y no queremos que tome una dimensión muy grande ya que esto hace complejo la lectura)
- min-height Fija el alto mínimo.
- max-height Fija el alto máximo.
Veamos un ejemplo:
<!DOCTYPE html> <html> <head> <title>Problema</title> <meta charset="UTF-8"> <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.