ボーダーから内容物（テキストや画像など）までの間に余白を取る事ができ、それをパディングといいます。

↑ paddeing-top ↓
←paddeing-left→	ボーダーから内側の余白がパディング	←paddeing-right→
↑ paddeing-bottom ↓

パディングを使うと背景画像に合わせたテキストの配置が出来ます。


<style type="text/css"><!--
.type01 {
width:400px;
height:250px;
border:1px solid #e0e0e0;
padding-top:80px;
padding-left:175px;
background:url(image/007.jpg) no-repeat top left;}
-->
</style>

<div class="type01">スタイルシートのパディングを使って・・・</div>

パディングは要素（タグ）内の余白の事ですが、マージンは要素の回りの余白の事です。

↑ maegin-top ↓
←maegin-left→	ボーダーから外側の余白がマージン	←maegin-right→
↑ maegin-bottom ↓

マージンはマイナスの値を使う事が出来るので、テキストや画像を重ねる事も出来ます。


<div style="font-size:20px;color:#0080ff">
Challenge</div>
<div style="margin-top:-15px;margin-left:40px;font-size:20px;color:#00cc66">
Home Page</div>

サイトレイアウトの基本はテーブルでしょう。テーブルで複数のセルを作り、その中にテキストや画像を配置していきます。 テーブルの区切り方や配置は人それぞれのセンスになります。しかしテーブルを利用しないで済むレイアウトの方が良いかもしれません。 あくまでデザイン系サイトを作るならの話になります。

レイアウトにテーブルを使うのは良くないという意見（W3Cの勧告）もありますが、スタイルシートによる配置は少し早いような気がしますし、 使い勝手の良くない一面もあります。つまりスタイルシートによるレイアウトに不安要素がまだあるので、 テーブルによるレイアウトはやもえないとか無難という意味合いなんです。

メニューもテーブルを使って作りますが、そのテーブルで作ったメニューも、レイアウト用に作ったテーブルの セルにはめ込みます。つまりテーブルの中にテーブルを入れる事になります。

またセンスの良いサイトは、余白の取り方がとても上手いです。余白が無いのはごちゃごちゃして見えたり、 余白の取り過ぎは、がら〜ん とした感じになります。その辺は微妙なバランスですね。

･　テーブルを使ったレイアウトのサンプル
･　スタイルシートを使ったレイアウトのサンプル
･　スタイルシートを使ったレイアウトのサンプル2

上のサンプルは、head / menu / contents / foot 、この4つの <div> を3通りの方法で配置したものです。 スタイルシートによるレイアウトは、スタイルシートのサポートが不十分なブラウザで見ると悲惨です。