Las propiedades margin, padding y border nos ayudan a agregar más espacio a los elementos, mejorando la apariencia, legibilidad y usabilidad del recurso web. Analicemos cada una de ellas en detalle.

Propiedades margin y padding

padding

padding se refiere al espacio entre el contenido de un elemento y su borde.

padding: top right bottom left

Disponemos de varias formas para asignar un valor al padding.

Forma abreviada

/* Same padding of 20px applied to all four sides: */
padding: 20px;

/* Top and bottom paddings of 10px, left and right paddings of 20px: */
padding: 10px 20px;

/* Top padding of 10px, left and right paddings of 20px, bottom padding of 5px: */
padding: 10px 20px 5px;

/* Top padding of 10px, right padding of 15px, bottom padding of 20px, left padding of 25px: */
padding: 10px 15px 20px 25px;

Cada padding por separado

padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;

margin

margin se refiere al espacio entre un elemento y los elementos adyacentes. Es el área fuera del borde del elemento.

margin: top right bottom left

Podemos asignar el margin de varias maneras.

Forma abreviada

/* Same margin of 20px applied to all four sides: */
margin: 20px;

/* Top and bottom margins of 10px, left and right margins of 20px: */
margin: 10px 20px;

/* Top margin of 10px, left and right margins of 20px, bottom margin of 5px: */
margin: 10px 20px 5px;

/* Top margin of 10px, right margin of 15px, bottom margin of 20px, left margin of 25px: */
margin: 10px 15px 20px 25px;

Cada margen por separado

margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;

Propiedad border

border se refiere a la línea que rodea el padding y el contenido de un elemento. Es el área que separa el contenido del elemento de su margen.

border: width style color;

Forma abreviada

border: 4px solid brown;

Esto significa que el borde de todos los lados será igual. Su width es 4px, el style es solid y el color es brown.

Considere el siguiente ejemplo para analizar los posibles estilos de borde:

Salida

Cada borde por separado

/* Instead of `top`, can be used any side (`right`, `left`, or `bottom`) */
border-top-color: aquamarine;
border-top-width: 12px;
border-top-style: groove;
border-top-right-radius: 4px;
border-top-left-radius: 8px;