Tamaños
Anchura y altura
ANCHURA: la propiedad CSS que establece la anchura de un elemento (caja) se denomina width.
width: unidad de medida | porcentaje | auto | inherit
ALTURA: La propiedad CSS que establece la altura de un elemento (caja) se denomina height.
height: unidad de medida | porcentaje | auto | inherit
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. Si el elemento padre no tiene una altura definida explícitamente, se asigna el valor auto a la altura. El valor inherit indica que la altura del elemento se hereda de su elemento padre.
- Se aplica: a todos los elementos, salvo los elementos en línea que no sean imágenes, las filas de tabla y los grupos de filas de tabla.
Margen y relleno
MARGEN: CSS define cuatro propiedades para controlar cada uno de los márgenes horizontales y verticales de un elemento. Cada una de las propiedades establece la separación entre el borde lateral de la caja y el resto de cajas adyacentes:
margin-top, margin-right, margin-bottom, margin-left
unidad de medida | porcentaje | auto | inherit
Existe una propiedad abreviada (shorthand) para las cuatro propiedades anteriores, denominada simplemente margin.
margin: ( unidad de medida | porcentaje | auto ) {1, 4} | inherit
La notación {1, 4} de la definición anterior significa que la propiedad margin admite entre uno y cuatro valores, con el siguiente significado:
- Si solo se indica un valor, todos los márgenes tienen ese valor.
- Si se indican dos valores, el primero se asigna al margen superior e inferior y el segundo se asigna a los márgenes izquierdo y derecho.
- Si se indican tres valores, el primero se asigna al margen superior, el tercero se asigna al margen inferior y el segundo valor se asigna los márgenes izquierdo y derecho.
- Si se indican los cuatro valores, el orden de asignación es: margen superior, margen derecho, margen inferior y margen izquierdo, (siguiendo el movimiento de las agujas del reloj).
- Se aplica: a todos los elementos salvo algunos casos especiales de elementos mostrados como tablas.
RELLENO: CSS define cuatro propiedades para controlar cada uno de los espacios de relleno horizontales y verticales de un elemento. Cada una de estas propiedades establece la separación entre el contenido y los bordes laterales de la caja del elemento.
padding-top, padding-right, padding-bottom, padding-left
unidad de medida | porcentaje | auto | inherit
Existe una propiedad abreviada (shorthand) para las cuatro propiedades anteriores, denominada simplemente padding.
padding: ( unidad de medida | porcentaje | auto ) {1, 4} | inherit
La notación {1, 4} de la definición anterior significa que la propiedad padding admite entre uno y cuatro valores, con el mismo significado que lo dicho para margin.
- Se aplica: a todos los elementos salvo algunos casos especiales de elementos mostrados como tablas.
Cálculo del tamaño total de un elemento
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 (que veremos más tarde) establecidos a un elemento determinan la anchura y altura final del elemento.
La anchura total de un elemento tiene en cuenta los márgenes, rellenos y bordes.
De esta forma, la anchura del elemento en pantalla sería igual a la suma de la anchura original, los márgenes, los bordes y los rellenos.
Así, la anchura/altura establecida con CSS siempre hace referencia a la anchura/altura del contenido. La anchura/altura total del elemento debe tener en cuenta además los valores del resto de partes que componen la caja del box-model.