各ボックスに入っているパーツ同士の間隔を調整します。
ボックスそのものを動かすのではなく、padding を使ってボックス内の余白を変更することでパーツ同士の間隔を調整します。
まずは縦方向の間隔を調整するために、サイトタイトル（<header>）、記事（<article>）、サイドメニュー（<aside>）フッター（<footer>）に対して次のように余白を設定します。なおナビゲーションメニュー（<nav>）についてはバーの太さに影響するため、ここでは余白を調整しません。
/* フッター */
footer p { margin: 0;
color: #888888;
font-size: 14px; }
footer { border-top: solid 1px #dddddd; }
/* 縦方向の間隔調整 */
header { padding-top: 8px;
padding-bottom: 8px; }
article { padding-top: 40px;
padding-bottom: 30px; }
aside { padding-top: 40px;
padding-bottom: 30px; }
footer { padding-top: 15px;
padding-bottom: 15px; }
<article>と<aside>は縦位置がずれないように、余白の設定を揃えてあります。
縦方向の間隔を調整しました。（画像をクリックすると大きく表示できます）
このようにmarginやpaddingに-topをつけると上方向、-bottomをつけると下方向の余白サイズを設定できます。
同様に-leftをつけてmargin-leftのようにすると左方向、-rightをつけてpadding-rightのようにすると右方向の余白サイズを設定できます。