Cajas en CSS: Márgenes externo e interno

Márgenes externos

Hay ocasiones en las que necesitas que un elemento guarde cierta distancia con el resto de la página. Para lograrlo, basta con especificar el margin en el archivo CSS. Especifica márgenes externos generales o específicos utilizando las siguientes instrucciones:

margin-top
margin-right
margin-bottom
margin-left
margin

No olvides que si utilizas margin como abreviatura, el orden sigue de arriba a izquierda, en el sentido de las agujas del reloj. Asimismo, si no especificas los cuatro márgenes, el navegador los completará por ti.

Márgenes internos

La instrucción padding funciona tal como margin, excepto porque especifica la distancia entre el borde de un elemento y su contenido (margen interno). Es muy útil también.

padding-top
padding-right
padding-bottom
padding-left
padding

Igual que el anterior, si utilizas padding como abreviatura, el orden se mantiene en el sentido de las agujas del reloj.

Ejemplos

Para especificar un margen derecho de 0.28em a una imagen, puedes hacer esto:

img {
margin-right: 0.28em;
}

o esto:

img { margin: 0 0.28em 0 0; }

Igualmente, para especificar márgenes internos derecho e izquierdo de 0.28em a una imagen, puedes usar esto:

img {
padding-right: 0.28em;
padding-left: 0.28em;
}

o esto:

img {
padding: 0 0.28em;
}

Cuando el navegador lea esta última instrucción, completará asignando un margen interno inferior de cero al elemento y un margen interior derecho de 0,28em, tal como si lo hubieras escrito tú mismo.

¿Lo ves? Es muy sencillo.

Conocimiento + Computadores