Las propiedades CSS (margin, padding y outline)

Hay dos propiedades que establecen la separación de los elementos: margin y padding. Si bien parecen lo mismo porque a veces no notamos ninguna diferencia entre usar una u otra, no lo son. Podríamos decir que margin es la separación de un elemento de otro y padding es el relleno, la separación entre un elemento y aquel que lo contiene ¿Confuso? Ciertamente, lo es.

Veamos la sintaxis de las propiedades ya que son sencillas.

margin es una forma reducida de establecer la separación de los cuatro bordes al mismo tiempo.

sintaxis en HTML
elemento {margin: valores;}
por ejemplo: div {margin: 2px 0 10px 5px;}

sintaxis en JAVASCRIPT
elemento.style.{margin='valores';
por ejemplo: this.style.margin='2px 0 10px 5px';

Donde el orden de los valores es: arriba, derecha, abajo e izquierda, cada una de ellos puede ser especificad por separado.

La propiedad margin-bottom establece el margen inferior; margin-right el margen derecho; margin-bottom el margen inferior y margin-left el margen izquierdo.

sintaxis en HTML
elemento {margin-top: valor;}
elemento {margin-roght: valor;}
elemento {margin-bottom: valor;}
elemento {margin-left: valor;}
por ejemplo: div {margin-left: 5px;}

sintaxis en JAVASCRIPT
elemento.style.marginTop='valor';
elemento.style.marginRight='valor';
elemento.style.marginBottom='valor';
elemento.style.marginLeft='valor';
por ejemplo: this.style.marginLeft='5px';

Los posible valores son auto, cm, mm, in,pt, pc, px, em, ex o un porcentaje y pueden ser tanto positivos como negativos. Por defecto, es cero.

• Si sólo de especifica un valor, este se aplica a los cuatro lados.
• Si se especifican dos valores, el primero se aplica a los márgenes superior e inferior y el segundo a los márgenes derecho e izquierdo.
• Si se especifican tres valores, el primero se aplica al margen superior, el segundo a los márgenes derecho e izquierdo y el tercero al margen inferior.
• Si establecemos cuatro valores, definirán los márgenes superior, derecho, inferior e izquierdo respectivamente.

Los valores los separamos mediante espacios; por ejemplo:

div {margin: 10px 20px;}

En los llamados elementos inline, los márgenes superior e inferior no tienen efectos prácticos.

La propiedad padding es una forma reducida de establecer el "relleno" de los cuatro lados al mismo tiempo y tiene la misma sintaxis que margin.

sintaxis en HTML
elemento {padding: valores;}
elemento {padding-top: valor;}
elemento {padding-right: valor;}
elemento {padding-bottom: valor;}
elemento {padding-left: valor;}
por ejemplo: div {padding-left: 5px;}

sintaxis en JAVASCRIPT
elemento.style.padding='valores';
elemento.style.paddingTop='valor';
elemento.style.paddingRight='valor';
elemento.style.paddingBottom='valor';
elemento.style.paddingLeft='valor';
por ejemplo: this.style.paddingLeft='5px';

El padding o relleno, es la cantidad de espacio a insertar entre el objeto y su margen o, si hay un borde (propiedad border) la distancia entre el objeto y el borde.

Sigue todas las reglas que los márgenes excepto que sólo se pueden usar valores positivos. Por ejemplo:

div {padding: 50px 10px 20px 30px}

Cada elemento de una página web es un rectángulo que tiene un contenido (textos, imágenes, etc.) y una serie de áreas opcionales a su alrededor (border, margin y padding) por lo tanto, el tamaño final depende de todas y cada una de esas propiedades aunque también depende de si han asignadas otras propiedades como width y height, si contiene texto u otros elementos, si es una tabla, si ... etc.

En térmimos generales, el ancho es la suma de los márgenes, los bordes y los rellenos izquierdos y derechos más el ancho del contenido y la altura es la suma de los márgenes, lso bordes y los rellenos superiores e inferiores más la altura del contenido.

Hay una propiedad extra relacionada, se trata de outline y es similar a la propiedad border pero, no ocupa espacio y adopta la forma del elemento, es decir, puede no ser rectangular.

Es una propiedad que vemos habitualmente, cuando hacemos click en algunos enlaces y vemos una línea punteada a su alrededor. Lamentablemente, no es reconocida por Internet Explorer pero podemos agregarla a las propiedades de estilo sin inconvenientes.

La propiedad genérica outline tiene los mismos parámetros que los bordes: width, style y color.

sintaxis en HTML
elemento {outline: valores;}
por ejemplo: img {outline: 2px 0 10px 5px;}

También podemos usar las propiedades individuales:

elemento {outline-width: valor;}
thin | medium | thick | longitud (el ancho del contorno valor inicial medium)

elemento {outline-style: valor;}
none | solid | double | dotted | dashed | groove | ridge | inset | outset (indica el tipo de contorno)

elemento {outline-color: valor;}
el color del contorno (valor inicial invert)

MÁS INFORMACIÓN:

La propiedad outline

CSS y los textos (parte 2)

SUMARIO:

Las propiedades CSS (background)

Las propiedades CSS (border)