Propiedades de Cajas CSS

A continuación se especifican las diversas propiedades que alteran el comportamiento o apariencia de las cajas HTML

Background-color

Define el color de fondo de un elemento. Esta propiedad acepta múltiples formatos de color como lo son:

Palabras clave
Colores del sistema
RGB hexadecimal
RGB numérico
RGB porcentual

Ejemplo

Padding

El padding consiste en la distancia entre la caja y el contenido de esta, se divide en las cuatro caras del elemento:

Padding left: distancia borde izquierdo con el contenido
Padding top: distancia borde superior con el contenido
Padding right: distancia borde derecho con el contenido
Padding bottom: distancia borde inferior con el contenido

Padding se trata de una propiedad con múltiples formas de definirla en CSS

Se puede asignar un valor a cada cara del elemento por separado:
También es posible generalizar y aplicar un único valor para todas las caras del elemento:
Otra opción es la de definir un valor para el eje Y y otro para el eje X de la siguiente forma:

Nota: en el caso de padding el primer valor define el eje Y y el segundo corresponde al eje X
La última alternativa al declarar el padding consiste en declarar un valor diferente para cada cara del elemento en el mismo uso de la propiedad, de la siguiente forma:

El orden al asignar el valor de las caras consiste en que el primer valor se asigna al top y posteriormente se continúa con las siguientes caras en el sentido de las agujas del reloj.

Nota: si se da el caso de que no se asigna alguna de las caras como en esta imagen:

Si no es definido el valor de alguna de las dos caras del eje en cuestión el navegador lo resuelve aplicando el valor de la cara que sí se decretó a todo el eje.

Height y Width

Estas propiedades definen las dimensiones en alto (height) y ancho (width) del elemento en cuestión.

Tener en Cuenta

Un aspecto que es útil recordar es que cierta propiedad puede modificar el comportamiento de height y de width, esta se trata de box-sizing la cual define lo que se tiene en cuenta para

Box-sizing

Esta propiedad define qué aspectos del elemento se tomarán en cuenta para definir las dimensiones del elemento, es decir define el comportamiento de algunas propiedades para que estas puedan o no modificar las dimensiones definidas por height y width. Para esto cuenta con dos valores con esta función:

Content-box

Este valor define que las dimensiones establecidas del elemento se ajusten acorde al contenido de este, es decir el espacio que ocupa el contenido se sumará al valor definido en height y width

Por lo tanto en este ejemplo las dimensiones de este elemento serán las definidas por height y width más las dimensiones de contenido y el padding resultando en un elemento que realmente excede los 100 X 100 definidos por height y width.
Border-box

Este valor define que el contenido no se tomará en cuenta para definir las dimensiones de la caja, por lo tanto sin importar el qué, las dimensiones totales del elemento serán las que establezcan height y width.

De esta forma

Margin

Se trata de la distancia de separación entre la caja y los demás elementos, su funcionamiento es idéntico al de padding por lo tanto también cuenta con las mismas formas de definir los valores de esta propiedad:

Se puede asignar un valor a cada cara del elemento por separado:
También es posible generalizar y aplicar un único valor para todas las caras del elemento:
Otra opción es la de definir un valor para el eje Y y otro para el eje X de la siguiente forma:
La última alternativa al declarar el margin consiste en declarar un valor diferente para cada cara del elemento en el mismo uso de la propiedad, de la siguiente forma:

Nota: si se da el caso de que no se asigna alguna de las caras como en esta imagen:

Si no es definido el valor de alguna de las dos caras del eje en cuestión el navegador lo resuelve aplicando el valor de la cara que sí se decretó a todo el eje.

Margin : auto

Se trata de un valor especial que puede adquirir esta propiedad, al aplicarla le indica al navegador que de forma automática realice los cálculos necesarios para centrar el elemento de forma horizontal, ese es el efecto de margin: auto centrar los elementos de tipo bloque que no se encuentren posicionados con position, según el contenedor en que se encuentren, siempre y cuando este valor se aplique de forma horizontal, ya que verticalmente no funciona.

Border-radius

Se trata de otra propiedad con una función simple, permite redondear las esquinas de los elementos, después de todo todos los elementos HTML están compuestos por cajas, acepta cualquier tipo de medida CSS, incluyendo porcentajes (%).

Es útil tener en cuenta que para redondear un elemento al máximo esto se logra con un valor de 50%

Ejemplo

resultando

Border-radius al igual que otras propiedades cuenta con múltiples formas de declararse en CSS.

Cuenta con múltiples propiedades las cuales permiten asignar un valor a cada esquina del elemento
También se puede generalizar un solo valor para todas las caras del elemento, tal y como se hizo en la imagen anterior
Por último es posible el definir un valor para cada cara del elemento desde un mismo uso de la propiedad
Nota: Al definir los valores de esta forma el primero corresponde a la esquina superior izquierda y de allí se continúa en el sentido de las agujas del reloj, finalizando con el último valor correspondiendo a la esquina inferior izquierda.

Border

Esta propiedad como su nombre lo indica define las características del borde del elemento, se trata de una propiedad "acortada", lo que significa que existen diferentes formas de aplicar la propiedad.

De hecho existen múltiples tipos de opciones al emplear este atributo, no obstante las características que debe poseer un border más relevantes son:

Grosor: Se refiere al grosor del borde en sí, para esta función border acepta los diferentes tipos de medidas CSS
Style: Este atributo define el tipo de borde que se aplicará al elemento, existen múltiples tipos:
- Solid: Se trata del valor más usado, genera un borde completo en el elemento:
- Dashed: Este valor genera un borde puntuado, cuadrado.
- Dotted: Genera un margen puntuado, redondeado.
- Double: Genera un borde doble.
- Groove: Genera un borde con el siguiente patrón:
- Hidden: Hidden significa oculto, este valor oculta el borde, se emplea en los casos que sea necesario el ocultar el borde de algún elemento.
- Inset: Genera un borde con el siguiente patrón:
- None: Literalmente define que el elemento no posea ningún borde, se diferencia de hidden ya que este último oculta el borde, sin embargo none directamente lo elimina del elemento.
- Outset: Genera un borde como el de inset pero invertido
- Ridge: Genera un borde como el de groove pero invertido.
Color: El último de los valores relevantes de un border es el color que poseerá dicho borde

Simplificación

Como tal border posee una propiedad individual para cada uno de estos valores sin embargo existe una forma de emplear todas las propiedades anteriormente nombradas fácilmente, optimizando el código CSS.

Esta práctica consiste en definir el ancho, border (ancho), el style (estilo) y el color del borde en una sola propiedad, de la siguiente manera:

Como se puede ver es posible definir más de una característica con el uso de la propiedad border, ahorrando espacio y tiempo al no usar las propiedades específicas de cada atributo, de este modo también pueden usarse las propiedades alternativas como border-top, left right o bottom, si se declaran solas lo mejor es declarar todos los valores en estas.

Nota: Al hacer esto realmente no es importante el orden en el que se declaran las características del borde, puede ir el color de primero o el estilo o incluso el grosor, todos los casos son igual de correctos.

Outline

Un aspecto a tener en cuenta al plantear los estilos de una web es el espacio en pantalla que cada propiedad o elemento requiere para poder mostrarse al usuario, por ejemplo:

La propiedad border, los píxeles que este puede llegar a ocupar tiene que tomarse de algún lugar ya sea del exterior de la caja aumentando el tamaño de esta (como con el valor por defecto de los navegadores "box-sizing: content-box;") o tomarse del interior de esta reduciendo así el espacio del contenido (como con el valor aplicado en el archivo "normalize" "box-sizing: border-box;"), de cualquier forma es necesario sustraer ese espacio de algún lugar.

El outline es una propiedad opcional al border, su funcionamiento y forma de implementarse es exactamente igual a la propiedad border con una notoria diferencia en su concepto, outline se diferencia de border en que este no "ocupa un espacio" en el modelo de cajas, es decir outline realmente no altera las dimensiones ni la ubicación de ningún elemento, ni siquiera en el que se está aplicando, por lo tanto esta propiedad puede apreciarse, pero el espacio en pantalla que esta ocupa para poder mostrarse pudiese decirse que es ficticio ya que no es tomado en cuenta por ningún elemento o propiedad, por lo tanto esta propiedad se puede visualizar sin tomar espacio de ningún elemento.

A continuación se muestra una comparación de outline y otra de border

Border:

Outline:

Como se puede observar en esta comparación border desplaza el elemento hacia abajo para poder mostrar todas las caras de este al usuario, esto no pasa con outline, ya que el espacio que este ocupa "no existe" la caja en cuestión se mantiene en su posición inicial, este efecto se mantiene sin importar si el outline es cubierto por algún elemento

Un ejemplo práctico de esta propiedad es el resaltado que se aplica al seleccionar un input, el cual por defecto se genera utilizando outline:

Box-shadow

Esta propiedad genera una sombra para el elemento en cuestión, y para funcionar esta propiedad necesita diferentes tipos de datos:

El primer valor a ingresar se trata de la ubicación de la sombra en el eje X
El segundo valor a ingresar se trata de la ubicación de la sombra en el eje Y
El tercer valor se trata del desenfoque, es decir el tamaño de la sombra
Como cuarto valor se ingresa el ancho del borde de la sombra (por lo general a esta característica se le asigna un valor de 0)
El quinto y último valor consiste en el color de la sombra, al igual que otras propiedades esta acepta los diferentes formatos de color CSS

Nota: Si se desea un efecto más intenso es posible repetir el efecto las veces que hagan falta añadiendo nuevamente los valores siempre y cuando se respeten dos cosas, la primera es añadir una coma (,) entre cada repetición de los valores y la segunda es culminar la declaración de la propiedad con el punto y coma (;)

Transform: Una de las funciones de esta propiedad es rotar los contenedores, para esto definimos un valor en deg, esta es la medida que representa a los grados en CSS por lo tanto un valor de "45 deg" es igual a declarar: "rotar el contenedor 45°."
Por lo tanto un código como este:
Resulta en esto:

Overflow

Esta propiedad se aplica en aquellos casos que el contenido excede a su contenedor, por lo que evita que este sobresalga, en su lugar incluye todo el contenido dentro de este, y genera una barra de desplazamiento vertical u horizontal para que le sea posible al usuario desplazarse a lo largo y ancho del contenido.

En otras palabras el efecto de esta propiedad es el de forzar que todo el contenido de la página se almacene dentro del elemento sin que este altere sus dimensiones o su posición, simplemente el contenido que no se pueda visualizar permanecerá oculto, y genera las barras de desplazamiento vertical y horizontal para hacer posible navegar dentro de este.

Como tal esta propiedad posee dos variantes overflow-x y overflow-y cada una genera una barra de desplazamiento en su respectivo eje, sin embargo su efecto puede ser logrado perfectamente con la propiedad acortada overflow, de cualquier forma todas estas propiedades cuentan con los mismos valores:

Visible: Se trata del valor por defecto de la propiedad, permite que el contenido sobresalga del elemento
Auto: Incluye a todo el contenido dentro del elemento y generará las barras de desplazamiento solo si es necesario, de lo contrario no lo hará
Scroll: Este valor al igual que auto incluye a todo el contenido dentro del elemento, pero con la diferencia de que fuerza la generación de las barras de desplazamiento X y Y aún si no son necesarias
Hidden: Este valor oculta la barra de desplazamiento, se utiliza solo cuando se desea que únicamente sea visible una de estas barras, ya que al usar scroll ambas lo serán, entonces se puede asignar por ejemplo overflow-x: hidden; y por otro lado overflow-y: hidden; de ese modo solo una de las barras será visible por defecto

Ejemplo

Float

Se trata de un viejo recurso CSS, ya que en los inicios de la web las páginas web se estructuraban basándose en tablas y float, en la actualmente existen formas mejores de cumplir con muchas de las funciones de esta propiedad, no obstante existe una característica que en ciertas circunstancias pudiese ser útil

La propiedad float genera el siguiente efecto sobre la interacción entre los textos y las imágenes:

Este efecto es logrado únicamente con el siguiente código:

Es decir aplicando la propiedad Float en la imagen, definiendo la dirección en la que se desea que se ubique, esta propiedad posee los siguientes valores:

Left: Ubica el elemento hacia la izquierda
Right: Ubica el elemento hacia la derecha

Nota: Posee más valores pero no son relevantes actualmente.

Sin embargo para lograr ese efecto se requieren cumplir ciertas condiciones:

Tanto el texto como la imagen deben estar dentro del mismo contenedor
En el código HTML el primer elemento debe ser la imagen
El atributo float debe estar definido en la imagen, con un valor de left o right

De ese modo se puede lograr dicho efecto en la interacción del texto y la imagen, actualmente este es de los pocos si no es que único uso que tiene la propiedad float que sea digna de mencionar.

Content-box

Border-box