Las cajas

1. La estructura de las cajas

Las cajas son contenedores constituidos por cuatro estructuras:

2. Los diferentes tipos de visualización

El tipo block layout sirve para visualizar cajas en bloque, unas sobre otras. Es el modelo utilizado por los elementos de tipo bloque, como los párrafos <p>, los encabezados <h1> a <h6>, las cajas <div>... Las cajas son entidades autónomas; su tamaño se puede gestionar con las propiedades width y height. Pueden utilizarse los márgenes externos (margin) y el relleno interno (padding) en cada lado de la caja. Las cajas en bloque, a su vez, pueden contener otras cajas en bloque.

En este ejemplo, las dos cajas tienen un ancho, un relleno interno, un borde y márgenes externos:

.caja {   
   width: 350px;   
   border: 1px solid #333;   
   padding: 10px;   
   margin: 10px 0;   
}
 

Esto es lo que se obtiene:

El tipo inline layout sirve para...

1. Anchuras y alturas estándares

En el apartado anterior, hemos visto que las propiedades width y height permiten gestionar la anchura y la altura de las cajas. Veamos con más detalle estas dos propiedades.

Propiedades: width y height

Valor: longitud | porcentaje | auto

Valor inicial: auto

Se aplica a: elementos de tipo bloque y reemplazados

Herencia: no

Porcentaje: relativo al ancho del padre (para width)

He aquí los valores disponibles:

Veamos un ejemplo sencillo (08_01.html) de dos cajas <div>...

1. Propiedades

Los márgenes externos permiten colocar un espacio alrededor de la caja para «separarla» de otros elementos que también se muestran.

La propiedad genérica margin permite indicar el mismo valor para los cuatro lados de la caja o bien uno para cada lado, con las propiedades margin-top, margin-right, margin-bottom y margin-left.

Propiedad: margin

Valor: anchura | porcentaje | auto

Valor inicial: 0

Se aplica a: todos los elementos

Herencia: no

Porcentaje: relativo a la dimensión del padre de tipo bloque más próximo

Estos son los valores que pueden usarse:

2. La fusión de los márgenes

Cuando dos cajas no flotantes poseen márgenes verticales (margen superior e inferior), el navegador fusiona esos márgenes utilizando el valor más elevado.

Si creamos dos reglas CSS, la primera con un valor de 10px para margin y la segunda con un valor de 30px, en la visualización la distancia vertical entre las dos cajas será de 30 píxeles (valor más alto de margin), y no de 40 (10 px + 30 px).

3. Un ejemplo de márgenes fijos

En este primer ejemplo (08_04.html), la primera...

1. Propiedades

Las cajas pueden enriquecerse con bordes que se colocan en los límites de la caja. Es posible definir un borde idéntico para todos los lados de la caja o bien bordes individuales para cada lado. Para ello, utilice estas propiedades:

2. Los estilos de bordes

En cuanto al estilo, puede especificar un borde idéntico con la propiedad border-style, o bien un borde diferente para cada lado, con las propiedades border-top-style, border-right-style, border-bottom-style y border-left-style.

Propiedad: border-style

Valor: none | dotted | dashed | solid | double | groove | ridge | inset | outset 

Valor inicial: none

Se aplica a: todos los elementos

Herencia: no

Estos son los valores posibles:

3. El grosor del borde

Use la propiedad genérica border-width para indicar un borde con el mismo grosor en los cuatro lados de la caja, o bien especifique un grosor diferente para cada lado con las propiedades border-top-width, border-right-width, border-bottom-width y border-left-width.

Propiedad: border-width

Valor: thin | medium | thick | longitud

Valor inicial: medium

Se aplica a: todos los elementos

Herencia: no

Estos son los valores que pueden usarse:

1. Esquinas con círculos

Las CSS3 permiten tener cajas con esquinas redondeadas. La propiedad border-radius forma parte del módulo Backgrounds and Borders Module Level 3, que está como Candidate Recommendation, 9 September 2014, en el momento de escribir este libro, en junio de 2015.

Puede obtener esquinas redondeadas idénticas con la propiedad border-radius, o bien esquinas diferentes con las propiedades border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.

Propiedad: border-radius

Valor: longitud | porcentaje

Valor inicial: 0

Se aplica a: todos los elementos

El valor indica el radio de redondeo de cada ángulo del contenedor (de la caja).

Veamos un ejemplo (08_09.html) con una primera caja que usa esquinas redondeadas idénticas y una segunda caja que usa esquinas redondeadas diferentes. 

<!DOCTYPE html>   
<html lang="es">   
<head>   
   <title>Las esquinas redondeadas</title>   
   <meta charset="UTF-8" />   
   <style>   
      .esquinas-iguales {   
         width: 300px;   
         padding: 10px;   
         border: 1px solid #333;   ...

1. Los colores de fondo

La propiedad background-color permite aplicar un color de fondo a las cajas. Los colores se pueden expresar:

Ejemplo (08_11.html) con un fondo de color azul:

<!DOCTYPE html>   
<html lang="es">   
<head>   
   <title>Los fondos de colores</title>   
   <meta charset="UTF-8" />   
   <style>   
      .color {   
         width: 300px;   
         padding: 10px;   
         background-color: #cef;   
      }   
   </style>   
</head>   
<body>   
<div class="color">Aenean lacinia bibendum nulla  
sed consectetur...</div>   
</div>   
</body>   
</html>
 

Esto es lo que se obtiene:

2. Los degradados de fondo

Las propiedades de degradado, linear-gradient() (degradado lineal) y radial-gradient() (degradado radial) sirven para aplicar un degradado al fondo de las cajas. Estas propiedades forman parte del módulo CSS Image Values and Replaced Content Module Level 3, que está como Candidate Recommendation, 17 April 2012.

Los degradados lineales utilizan la propiedad linear-gradient() con numerosos parámetros.

1. La propiedad flotante

El hecho de atribuir la propiedad de flotante a una caja permite apartarla del flujo normal de la página y ubicarla en relación con el elemento de bloque más próximo, sobre el lado derecho o el izquierdo de este. Para ello, se emplea la propiedad float.

Propiedad: float

Valor: none | left | right

Valor inicial: none

Se aplica a: todos los elementos

Herencia: no

He aquí los valores disponibles:

2. Un ejemplo sencillo de cajas flotantes

En este ejemplo (08_16.html), las dos cajas flotan sobre su izquierda.

<!DOCTYPE html>   
<html lang="es">   
<head>   
   <title>Les cajas flotantes</title>   
   <meta charset="UTF-8" />   
   <style>   
      .caja-1 {   
         float: left;   
         padding: 10px;   
         width: 350px;   
         border: thin solid #000000;   
      }   
      .caja-2 {   
         float: left;   
         padding: 10px;   
         width: 350px;   
         border:...