Las cajas
Como vimos anteriormente, los elementos en HTML son basicamente cajas que pueden desplegarse en una de dos maneras: en bloque o en linea.
Además de esto, todos los elementos están contienen los componentes descritos en la siguiente figura:
Descripción
- Área de contenidos
- Espacio que almacena el contenido mismo de la caja, éste puede ser texto, imágenes u otros elementos en HTML.
- Padding
- El padding corresponde al margen interior del elemento. El padding recibe características del fondo como color o imagen de fondo.
- Border
- El borde es una linea que rodea al elemento.
- Margin
- El margen es el espacio externo al elemento. Los márgenes siempre son transparentes.
Modificar alto y ancho
Podemos utilizar las propiedades width y height para modificar el ancho y alto de la caja.
Es importante recordar que sólo es posible modificar estas propiedades en objetos en bloque.
De no especificarse el ancho de un elemento, este se extenderá a todo el ancho de su elemento contenedor. Su altoen tanto, se ajustará al alto del contenido del elemento.
Para modificar estos valores utilizamos.
p { width:300px; }
h2{ height:400px; }
Importante
No olvidar que los valores de alto y ancho solo se aplica al área de contenidos de la caja. Si agregamos padding, margin o border, los valores de éstos se sumarán a los valores width y height.
Rebalse de contenidos
Cuando definimos el ancho o alto de un elemento y su contenido excede estas dimensiones puede suceder lo siguiente:
Cupcake ipsum dolor sit amet caramels. Dragée I love soufflé applicake chocolate cake pastry applicake. I love cheesecake chocolate bar fruitcake. Gingerbread pudding macaroon I love donut carrot cake gummies.
La caja que creamos tiene 150x150px, el texto que contiene no alcanza en este espacio y por tanto se rebalsa.
Para modificar este comportamiento disponemos de la propiedad overflow. Esta propiedad puede recibir los siguientes valores:
- visible
- El valor por defecto, muestra todo el contenido sin importar si se rebalsa.
- hidden
- Los contenidos no se extienden fuera del contenedor y se cortan abruptamente en caso de superarlo.
- scroll
- El navegador agrega una barra de scroll a la caja contenedora. Con este valor asignado a la caja, la barra siempre será visible.
- auto
- El navegador decide si se requiere una barra de scroll, la mayoría de las veces si el contenido no calza, entonces aparece la mencionada barra.
Ejemplos
Display: visible
Cupcake ipsum dolor sit amet caramels. Dragée I love soufflé applicake chocolate cake pastry applicake. I love cheesecake chocolate bar fruitcake. Gingerbread pudding macaroon I love donut carrot cake gummies.