サイドバーに余白を設置する

<< 前のページ 左右のグループを入れ替える

前回までの画面をよく見ると、コンテンツ部分は余白があるのに対して、サイドバーの部分は余白が無く、境界線ぴったりまで文字が並んでいます。この部分をコンテンツと同じように、余白を設定します。

paddingで30pxの余白を設置します。サイドバーの横幅は250pxだったので、左右の横幅(30px×2)を引いた値を新たな横幅とします。つまり、190pxとなります。

#sidebar {
float:left;
width:190px;
padding:30px;

}

実際にブラウザで確認します。サイドバー部分に余白が設定されたことがわかります。

余白設定

次のページ >> カテゴリと個別エントリも2カラムにする

▲ページトップへ