Margin, Padding

Este DIV ocupa 102px, 100 de width + 1px por cada línea

Este DIV tiene las mismas medidas pero con un margin, que es la distancia hacia los elementos alrededor. Es decir ocupa un espacio de 122, 100 de width, 2 de borders y 10 de margin de cada lado

Este DIV tiene las mismas medidas que el anterior pero con un padding, que es la distancia del borde hacía adentro para los elementos. Es decir ocupa un espacio de 142, 100 de width, 2 de borders, 10 de margin de cada lado y 10 padding;

Con el padding si se hace un ajuste en el tamaño de la figura, ya que debe dejar 100 de width

Los elementos debe separarse por margen, no por padding. Por ejemplo para darle más espacio a un link le doy padding, si le doy margin, solo lo separo pero el elemento queda igual

Le doy con Margin y el área donde puedo picarle no aumenta

Le doy con Padding y el área donde puedo picarle aumenta

Los padding sirven para darle a un elemento mas grosor, no para separar elementos

Max-width , Min-Width

Con esto puedo definir lo máximo y mínimo que puede crecer un elemento

Hay que crecer y decrecer el navegador para ver la diferencia

margin

margin:20px; 20 hacia todos lados

margin:20px 10px; aplica 20 a los lados, 10 hacía arriba

margin:20px 10px 5px 8px;20 arriba 10 derecha 5 abajo 8 izquierda, como aguja del reloj

margin:20px 10px 5px 8%;Se vale combinar pixeles y porcentajes

margin-top, margin-left, margin-right, margin-botton - Si se quiere especificar algún lado

padding

padding:20px; 20 hacia todos lados

padding:20px 10px; aplica 20 a los lados, 10 hacía arriba

padding:20px 10px 5px 8px;20 arriba 10 derecha 5 abajo 8 izquierda, como aguja del reloj

padding:20px 10px 5px 8%;Se vale combinar pixeles y porcentajes

padding-top, padding-left, padding-right, padding-botton - Si se quiere especificar algún lado