Primeiro precisamos entender o que vem a ser a propriedade margin. Margin não é nada além da margem do seu seletor em relação à sua página ou seja: Se colocamos a margin de 3px em uma caixa de gadget, ela terá um espaçamento de 3 pixels para a próxima caixinha, é simples. Vamos primeiro analisar as propriedades do código:
margin-top: 10px;margin-bottom: 5px;margin-left: 7px;margin-right: 8px;margin: 11px;
A propriedade margin precisa ser indicada por uma coordenada. Então ao colocar top, você atribui uma margem ao topo. Ao colocar bottom, você atribui uma margem à parte de baixo. Ao colocar left, atribuímos uma margem à esquerda e ao colocar right à direita. E como já aprendemos, se colocarmos sem nenhuma coodernada, o mesmo valor vai ser aplicado aos quatro lados.
Margin decide o espaço entre seu elemento e o resto, enquanto padding decide o espaço entre seu elemento e a borda. Veja abaixo um exemplo de margin:
Na caixa do meu gadget existe uma margin no topo delas equivalente a 20px. Esse valor cria uma margem entre elas, deixando esse espacinho. Entenderam? Por isso quando vamos subir a sidebar, utilizamos margin, que seria a margem entre TODAS as caixas e o resto do blog.
