margin vs padding‏

margin sirve para establecer la separacion entre dos elementos, aunque parezca complicado de entender, no lo es. Supongamos que tenemos una imagen y pegado un bloque con texto dentro, bien, usando la propiedad marginpodremos separar esos dos elementos, ¿asi esta mejor eh?.

Se utiliza así:

.clase{ margin: 10px ;}

Haciendo eso separaremos 10px la imagen del texto, ojo que estamos separando 10px de arriba, derecha, abajo e izquierda, si queremos separar 10px solo de la izquierda, deberíamos hacer lo siguiente:

.clase{ margin: 10px 0px 0px 0px}

Como vemos, podemos aplicar margenes por orientación, los valores se aplican siguiendo el sentido de las agujas del reloj, es decir:

.clase{ margin: arriba derecha abajo izquierda;}

o también podemos hacerlo así:

.clase{
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 10px;
 }

Claro que no hace falta especificar todas las orientaciones, solo basta con poner la que queremos especificar.

El padding a primera vista es igual al margin, incluso en determinadas ocaciones podremos usar las dos y conseguiremos el mismo resultado visual, la diferencia esta en que padding no separa dos elementos, mas bien crea un espacio dentro uno de ellos, por ejemplo, si tenemos un bloque con texto dentro y una imagen al lado bien pegada, al aplicarle padding al bloque con texto, los elementos siguen pegados, pero vemos un espacio al igual que si usaramos la propiedad margin, solo que esta vez se creo un espacio dentro del bloque (con margin se hubiera creado el espacio fuera del bloque) con texto dentro.

La forma de aplicarlo es igual que margin, solo que esta vez el nombre será padding:

.clase{ padding: 10px; }

.clase{ padding: 10px 0px 0px 0px; }

.clase{          
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
 }

Como vemos, su uso es idéntico a margin.