UL- MARGEM -margin: 12px 12px 12px 12px; padding:12px 12px; 12px; 12px; top;right;bottom;left border-style: dashed; border-width: medium; border-color: lime; background: yellow;
• LI- CONTEUDO texto na cor branca. Dimensão do texto: padding:12px 12px; 12px; 12px; margin:12px 12px; 12px; 12px; Cor de fundo da caixa azul. background: blue; border-style: dashed; border-width: medium; border-color: lime;

Dimensões da caixa:
Largura: width + padding-left + padding-right + border-left + border-right
Altura: height + padding-top + padding-bottom + border-top + border-bottom
LARGURA IDEAL = VDL = ( (BD + BE) + (PD + PE) + (MD + ME) )

A margem não afeta a caixa em si, mas afeta outros conteudos que se relacionam com a caixa.

fonte