Índice

La noción de caja

Utilizar las hojas de estilo CSS es indisociable de la noción de caja. Una caja es la zona de la pantalla donde aparece el elemento HTML elaborado. Las cajas poseen varias partes:

  • El contenido: es donde aparece el elemento insertado en la página, el texto, la imagen, la tabla, etc. La propiedad CSS width determina su ancho y la propiedad height determina su alto.

  • El relleno: es el espacio entre el contenido y el límite de la caja. La propiedad padding define este espacio. Podemos definir cuatro valores de espacio diferentes en los cuatro lados de la caja.

  • El borde: es el marco dibujado que se aplica al límite de la caja. La propiedad border define este borde. Podemos definir cuatro bordes diferentes en los cuatro lados de la caja.

  • El margen: es el espacio en torno a la caja. La propiedad margin determina este espacio. Podemos definir cuatro valores de margen diferentes para los cuatro lados de la caja.

El ancho de la vista en las páginas web depende de la propiedad box-sizing. Esta propiedad acepta dos valores principales:

  • box-sizing: content-box;,

  • box-sizing: border-box;.

Con el valor content-box, el ancho de la caja que aparece en la pantalla del navegador queda definido por la suma del valor del ancho (propiedad width), los valores de relleno izquierdo y derecho (propiedades padding-left y padding-right) y los valores de los bordes izquierdo y derecho (propiedades border-left y border-right).

Lo mismo ocurre con la altura.

images/04sf062.png

Con el valor border-box, el ancho de vista calculado width incluye el relleno ...