# data[].attributes.body
La cajas siempre son rectangulares

# data[].attributes.body
La característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web.

# data[].attributes.body
El modelo de cajas es el comportamiento de CSS .

# data[].attributes.body
Las cajas de una página se crean automáticamente.

# data[].attributes.body
Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento.

# data[].attributes.body
Los comandos que se utilizan son:

# data[].attributes.body
La propiedad CSS que controla la anchura de la caja de los elementos se denomina width.

La propiedad width no admite valores negativos y los valores en porcentaje se calculan a partir de la anchura de su elemento padre.

# data[].attributes.body
El siguiente ejemplo establece el valor de la anchura del elemento <div> lateral:

#lateral { width: 200px; }

<div id="lateral">
  ...
</div>
CSS define otras dos propiedades relacionadas con la anchura de los elementos: min-width y max-width, que se verán más adelante.

# data[].attributes.body
El siguiente ejemplo establece el valor de la altura del elemento <div> de cabecera:

#cabecera { height: 60px; }

<div id="cabecera">
  ...
</div>

CSS define otras dos propiedades relacionadas con la altura de los elementos: min-height y max-height, que se verán más adelante.

# data[].attributes.body
Margen

CSS define cuatro propiedades para controlar cada uno de los márgenes horizontales y verticales de un elemento.

# data[].attributes.body
La propiedad CSS que controla la altura de los elementos se denomina height
Al igual que sucede con width, la propiedad height no admite valores negativos. Si se indica un porcentaje, se toma como referencia la altura del elemento padre

# data[].attributes.body
Relleno

CSS define cuatro propiedades para controlar cada uno de los espacios de relleno horizontales y verticales de un elemento.

# data[].attributes.body
Bordes

CSS permite modificar el aspecto de cada uno de los cuatro bordes de la caja de un elemento. Para cada borde se puede establecer su anchura o grosor, su color y su estilo, por lo que en total CSS define 20 propiedades relacionadas con los bordes.

# data[].attributes.body
Fondos

El último elemento que forma el box model es el fondo de la caja del elemento. El fondo puede ser un color simple o una imagen.

# data[].attributes.body
Margen, relleno, bordes y modelo de cajas

La anchura y altura de un elemento no solamente se calculan teniendo en cuenta sus propiedades width y height. El margen, el relleno y los bordes establecidos a un elemento determinan la anchura y altura final del elemento. En el siguiente ejemplo se muestran los estilos CSS de un elemento:

# data[].attributes.body
div {
  width: 300px;
  padding-left:  50px;
  padding-right: 50px;
  margin-left:   30px;
  margin-right:  30px;
  border: 10px solid black;