Uso eficiente del margen y padding.

[sanxuan]

Puede que un manual de CSS te sea más util. Intenta buscar el modelo de caja CSS.
En líneas generales, los márgenes sirven como separadores entre elementos. Son los responsables de la mayor parte de los descuadres. La razón es que al contrario que el padding se extienden más allá de los límites del objeto y en lugar de sumar su ancho al margen de otro elemento los márgenes se solapan. Cuando dos márgenes coinciden en un borde, por ejemplo el derecho de un elemento y el izquierdo del siguiente, el navegador establece el margen escogiendo el mayor de los dos.
El padding, que en ocasiones se llama relleno es un margen interior. Piensa en una hoja de papel. El padding es el margen que dejas entre los bordes y el texto que escribes. El margin sería la separación entre distintas hojas.
Cuando calculas el espacio necesario para mostrar un elemento debes tener en cuenta que el ancho que se indica con la propiedad width es el ancho del contenido, del texto dentro de la hoja, no de la hoja en sí. A este valor debes añadir el ancho del padding, el del borde y el del margen. Igual con la altura.