a:hover{
  background-color: yellow;
}

h1{
  background-image: url('../img/icon/cherry2.gif');
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 14px;
}

widthは画像の横幅と同じにする
余白の大きさはpaddingで設定する

div.imagewaku{
  border: 1px solid green;
  padding: 3px;
  width: 160px;
}

div.oya{
  border: 1px solid green;
  position: absolute;
  top: 50px;
  left: 50px;
}
div.ko{
  border: 1px solid red;
  position: absolute;
  top: 50px;
  left: 50px;
}

内容と線との余白を指定するにはpaddingを使う

p.line{
  border-bottom: 1px solid blue;
  padding-bottom: 2em;
}

親の横幅100pxの中に画像160pxを表示する場合autoを設定するとスクロールバーが表示される
scrollを設定すると大きさに関係なくスクロールバーが表示される

div.oya{
  width: 100px;
}
div.bigimg{
  width: 100%;
  overflow: auto;
}

親の横幅100pxの中に画像160pxを表示する場合hiddenを設定するとあふれる部分は表示しない

div.oya{
  width: 100px;
}
div.bigimg{
  width: 100%;
  overflow: hidden;
}

親の横幅100pxの中に画像160pxを表示する場合visibleを設定すると全部表示する

div.oya{
  width: 100px;
}
div.bigimg{
  width: 100%;
  overflow: visible;
}

cherry2.gifの画像が背景画像になり、
右側に並んで縦方向にのみリピートする。
背景色としてピンク色が表示される。

body{
  background: pink url('../img/icon/cherry2.gif') right repeat-y;
}

5pxの緑の線で囲み
背景色をピンクにしている
文字は黒色。周囲に1文字分の余白を設定している
幅は200px

p{
  border-width: 5px;
  border-color: green;
  border-style: solid;
  background-color: pink;
  color: #000000;
  padding: 1em;
  width: 200px;
}

1pxの赤の線で単語を囲み背景色をピンクにしている
文字はmaroon。余白は0px

span{
  border-width: 1px;
  border-color: red;
  border-style: dotted;
  background-color: pink;
  color: maroon;
  padding: 0px;
}

li{
  list-style: inside url('../img/icon/apple04.gif');
}

div.navi{
  background-color: green;
  padding: 3px;
  font-size: 80%;
}
div.navi a{
  color: pink;
  text-decoration: none;
  border-right: 1px #ccffcc solid;
  padding: 0px 0.3em;
}

div.sidebar{
  float: right;
  width: 20%;
  background-color: #ffffcc;
  border-left: dashed green 1px;
  margin-left: 10px;
  padding: 0.3em;
}

h1{
  padding-bottom: 10px;
}
h2 span{
  background-color: #c00;
  color: #FFF;
  padding: 3px;
}