Aprendiendo CSS: margin, padding y outline

Las propiedades margin y padding son importantes cuando hablamos de posicionar elementos dentro de una página web ya que nos permite establecer el espacio externo e interno de un objeto, como puede ser un tag <div>.

Cuando hablamos de margin, estamos haciendo referencia al margen externo que contiene cuatro valores: margen superior, margen inferior, margen izquierdo y margen derecho.

Veamos la sintaxis de las propiedades ya que son sencillas.

 

Sintaxis en HTML

elemento { margin: superior, derecho, inferior, izquierdo; }

por ejemplo: div {margin: 5px 0 11px 3px;}

 

Como estamos viendo en este ejemplo, le estamos asignando un margen superior de 5 pixeles, un margen derecho de 0, 11 pixeles para el margen inferior y 3 para el margen izquierdo. Facil, no? Aunque en esta oportunidad utilizamos px ( pixeles ), se pueden utilizar la siguientes medidas para definir dicho valor: Los posible valores son auto, cm, mm, in,pt, pc, em, ex o un porcentaje y pueden ser tanto positivos como negativos.

 

Existen variantes para aplicar los valores al margen si tenemos valores iguales para dos o mas de ellos, tales como:

 

Caso 1. Si especificamos solamente un valor, este se aplica a los cuatro lados.
Caso 2. Si especificamos dos valores, el primero se aplica a los márgenes superior e inferior y el segundo a los márgenes derecho e izquierdo.
Caso 3. Si especificamos tres valores, el primero se aplica al margen superior, el segundo a los márgenes derecho e izquierdo y el tercero al margen inferior.
Caso 4. Si establecemos cuatro valores, definirán los márgenes superior, derecho, inferior e izquierdo respectivamente.

 

Cuando hablamos de padding, hacemos referencia al espacio de separación entre los margenes de elemento y el contenido del mismo.

 

Sintaxis en HTML

elemento { padding: superior, derecho, inferior, izquierdo; }

por ejemplo: div { padding: 0px 2px 0 1px;}

 

Como estamos viendo en este ejemplo, le estamos asignando un padding superior de 0, un padding derecho de 2 pixeles, 0 pixeles para el padding inferior y 1 para el padding izquierdo. Tal como lo vimos para los margenes, los 4 casos también se aplican para el padding.

 

Existe ademas una propiedad llamada outline que generalmente vemos cuando nos posicionamos sobre un link y es de forma punteada a su alrededor. De la misma manera que los bordes poseen las propiedades: width, style y color, outline tambien los tiene:

 

Sintaxis en HTML

 

elemento { outline: superior, derecho, inferior, izquierdo; }
por ejemplo: img {outline: 2px 0 10px 5px;}

Dentro de sus propiedades, podemos utilizar las sig:

 

elemento {outline-width: valor;}
Opciones: thin | medium | thick | longitud

 

elemento {outline-style: valor;}
Opciones:  none | solid | double | dotted | dashed | groove | ridge | inset | outset

 

elemento {outline-color: valor;}

 

Via: Vagabundia