今回のCSS

要素の外側の幅を指定する。

.testClass
{
  margin-top:XXpx;
  margin-bottom:XXpx;
  margin-right:XXpx;
  margin-left:XXpx;
  margin:上下左右px;
  margin:上下px 左右px;
  margin:上px 左右px 下px;
  margin:上px 右px 下px 左px;
}

要素の外側、他要素との間隔の指定でした。
横並びの画像リストの時とか、margin-rightとか(leftでもよいです)で指定してやると綺麗に間隔があいたりします。

要素の中の間隔を指定しよう

marginは要素の外側の間隔でしたが、次は要素の内側の間隔の指定になります。

.testClass
{
  padding-top:XXpx;
  padding-bottom:XXpx;
  padding-right:XXpx;
  padding-left:XXpx;
  padding:上下左右px;
  padding:上下px 左右px;
  padding:上px 左右px 下px;
  padding:上px 右px 下px 左px;
}

これは要素の内側の指定でした。
隣接する要素との間隔は変わりませんが、自要素が膨れ上がる感覚でOKかと思います。
以下、paddingがどれだけ素晴らしいのかが分かるテーブル

練習問題的な

2つのdivを作り
最初のdivは、【左20px 上20px 下10pxのmargin】を指定し、【上左に5pxのpadding】を指定してください。

また、適当なテキストを最初のdiv内に記述し、【フォントサイズを13px】【文字色を赤(赤っぽければ何でもOK)】としてください。
id指定でCSSを組んでみてください。ID名は問いません。

次のdivには左50pxのmarginを指定し、上下左右10pxのpaddingを指定してください。
また、適当なテキストを次のdiv内に記述し、【div背景色を黒】【文字色を白】としてください。
class指定でCSSを組んでみてください。class名は問いません。

【上記できた人用の追加】
もっと2割 の文言を追加記述し、2部分を上付き文字としてください。
一文字分インデント幅を開けて、文字間隔を2.5文字開けてください。
記述divはどちらでもかまいません