Padding y Border

Paddig es la distancia entre contenido y el borde que encierra el contenido. Al igual que margin tiene padding-top, padding-right, padding-bottom, padding-left. Se aplica a todos los elementos excepto a grupos de cabeceras de tablas y grupos de pies de tabla. Tiene como valor inicial el 0.

Para modificar el borde, Css permite definir el aspecto de cada uno de los cuatro bordes de los elementos. Para cada borde se puede establecer anchura, color y estilo.

La anchura del borde se define con la propriedad border-width. Dispone de valores como thin (borde delgado), medium (borde normal) y thick (borde ancho). O de un valor numérico indicado en px. Es posible definir comportamientos diferentes para cada uno de los cuatro bordes utilizando las propriedades individuales border-top-width, border-right-width, border-bottom-width y border-left-width.

El color del borde se define con border-color. Es posible definir comportamientos diferentes para cada uno de los cuatro bordes utilizando las propriedades individuales border-top-color, border-right-color, border-bottom-color y border-left-color.

Para aplicar un estilo se escoge uno de los 8 estilos diferentes de borde. El valor de esta propiedad se modifica con border-style. Por defecto tendrá el valor none (ninguno). Es posible definir comportamientos diferentes para cada uno de los cuatro bordes utilizando las propriedades individuales border-top-style, border-right-style, border-bottom-style y border-left-style.

Las propriedades de border se pueden agrupar en una sola: border: grosor estilo color;

.especial { border-bottom: 2px dotted #003; }

La anchura total de un elemento es la combinación de su anchura con los márgenes, rellenos y bordes.

margen-izquierdo + borde-izquierdo + relleno-izquierdo + anchura-contenido + relleno-derecho + borde-derecho + margen-derecho = total-visualización-elemento

Siguiente

Anterior