サイドバーに余白を設置する
<< 前のページ 左右のグループを入れ替える
前回までの画面をよく見ると、コンテンツ部分は余白があるのに対して、サイドバーの部分は余白が無く、境界線ぴったりまで文字が並んでいます。この部分をコンテンツと同じように、余白を設定します。
paddingで30pxの余白を設置します。サイドバーの横幅は250pxだったので、左右の横幅(30px×2)を引いた値を新たな横幅とします。つまり、190pxとなります。
#sidebar {
float:left;
width:190px;
padding:30px;
}
実際にブラウザで確認します。サイドバー部分に余白が設定されたことがわかります。
次のページ >> カテゴリと個別エントリも2カラムにする