二段組もどき 2

段間の罫線

サイドバーの左側に罫線を引いてみましょう。

body部分のマークアップは前と同じです。

CSSは #sidebar だけ次のように変えました。つまり,罫線とサイドバーの中身がくっつかないように,サイドバーの左に1文字分のパディングを付けました。代わりにサイドバーの幅は5%だけ増やしました。

#sidebar {
  float: right;
  width: 25%;
  border-width: 0 0 0 1px;
  border-style: solid;
  border-color: #888;
  padding-left: 1em;
}