ここではブロック１つ分だけで完結するレイアウトについて説明します。
ブロックの内側や外側に対する設定を行うだけでも、いろいろと見栄えのよいレイアウト（配置）ができます。
シンプルなレイアウトその１は余白です。
背景色の入力例では、文字の上下および左と背景色の境目の間に余裕がなく、詰まっているように感じないでしょうか？
ブロックの内側に余白を設定することで、拡げることができます。次の様に入力してみてください。
<div style="padding: 8px; background-color: orange;">余白あり</div>
<div style="padding: 1em; background-color: yellow;">１文字ぐらいの余白</div>
次のように表示されます。 比較のための余白が無いケースも表示しています。
上下と左側に余裕が生まれるはずです。
"padding: 8px;"で、テキストの前後左右に８ピクセルの余白（パディング）が追加されます。
8pxのpxはピクセル単位であることを表しています。
２つ目の例の1emは別の単位です。 「だいたい１文字分」を表しています。
他にも使用可能な単位がありますが、私はこの２つの単位しか使ったことがありません。 この２種類だけで十分だと思います。
padding: 1em;だと、「上下の余白が多すぎる」…と感じることはよくあります。
そんな時、次のように入力することで上下と左右の余白を変えることもできます。
<div style="padding: .5em 1em; background-color: orange;">余白あり</div>
次のように表示されます。
paddingの指定値が２つになっていますが、最初の.5emは0.5em=文字半分という意味です。 上下の余白を文字半分にします。
次の1emは左右の余白を文字１つ分にします。
自由記入欄にそのままテキストを入力すると、左に詰まって表示されます。
行頭に空白文字をいれれば、間を空けることはできますが、「テキスト量が多いとちょっと面倒」とか「左からたくさんあけたい。」というとき、次の様に入力すると左から離されて表示されます。
<div style="padding-left: 1em;">左側だけ１文字分の余白</div>
"padding-left: 1em;"で左側に１文字分の空白が入るようになります。
こんな感じで、「見出し」と「本文」を使い分けるようにするとよいかも？
１．見出し１
<div style="padding-left: 1em;">本文を書く。
本文２行目。
本文３行目。</div>
上の２つの入力例は、次のように表示されます。
padding-???には他にも種類があり、「上だけ」「下だけ」「右だけ」に余白を入れることもできます。
また、paddingのパラメーターの指定の仕方もいろいろあります。 全部書いているときりがないので省略します。詳しい情報はネットを検索して調べてください。
シンプルなレイアウトその２は外側の余白です。
次のように入力して、表示を見てください。
ルシルム・エント・フラウス
<div style="border: 2px solid;">オーラム共和王国国王。
先代国王の崩御した刻碑歴990年に、わずか7歳の幼さで王座に就くことになった。
評議会による合議制を取り入れ共和王国と国名を改めた刻碑歴512年以来、王家の権力は衰退する一方であったが、この幼王を以て完全な傀儡政権となった。</div>
次のように表示されます。
この入力例では枠が自由記入欄の両端ギリギリに描画され、少し見えにくくなっています。 （今回はブロックの下に文章が無いので、下の枠も見えにくくなっています。）
ブロックの前後に他の入力があったり、改行を入れたりすることで、上下の枠は目立つようになりますが、左右はやはり見えにくいままです。 せっかく枠をつけているのだから、枠線が目立つように両端から少し離した方が良いですよね？
そんなときは次のように入力してください。１つ前のものと見比べてください。
ルシルム・エント・フラウス
<div style="margin: 0 100px; border: 2px double;">（ブロックの中は同じなので、省略します。）</div>
次のように表示され、左右の枠線が目立つようになります。 こうすると「枠で囲ったブロックが自由記入欄の中央に配置されている」というレイアウトをしてるように見えませんか？
"margin: 0 100px;"で、枠の外側（ブロックの外側）に余白をつけることができます。
この例では、枠の上下は余白なし、左右は１００ピクセルの余白が設定されます。
またpaddingのように、"maring: 4em;"という指定（パラメーター１つの指定）もできます。 この時は、上下左右に同じ余白（この例の場合は４文字分の余白）をつけるように設定されます。
paddingと同じように、marginもmargin-leftなどの上下左右のどこか１つだけ余白設定するCSSがあります。 また、パラメーターの指定方法も複数種類あります。詳細はネットで検索して下さい。
枠（border）を基準にして考えると、枠と余白には次の関係があります。
また、背景色を塗ったときにも影響があります。 背景色は枠の中（言い換えればブロックの内側）の色です。 maringで余白をつけたときは、そこは背景色が塗られません。 逆にpaddingで余白をつけたときは、そこは背景色が塗られます。
ブロック１つだけの時はあまり気にならないことですが、複数のブロックを隣り合わせにレイアウトしたり、ブロックの中に別のブロックを入れたり（入れ子構造にしたり）するときに、marginとpaddingの使い分けができていないと変なところに背景色が出てしまったりすることがあります。
marginはマイナスの値を指定することができます。これをネガティブマージンと呼びます。
paddingはマイナスの値を指定できません。
使用頻度は少ないですが、ちょっと特殊な表示をしたいときやレイアウトの調整に使う事ができます。 例えば、次のように入力すると重ね表示ができます。
<div>こ ん に ち は</div><div style="margin: -15px 0 0 3px; color:red;">こ ん に ち は</div>
次のように表示されます。
marginは「余白」というよりも「間隔を拡げる設定」と思ったほうが方がよいかもしれません。
「ネガティブマージン」＝「間隔をマイナスに拡げる」＝「間隔が詰まり、重なってしまう」のです。
シンプルなレイアウトその３はテキストのセンタリングです。
背景色をつけて文字を中央に寄せれば、それだけでタイトルや見出しになると思いませんか？ そうでしょう。そうでしょうとも。（ベルリッテン構文）
それではセンタリングしてみましょう。 次の様に入力してください。
<div style="text-align: center; font-size:200%; padding: .5em 1em; color:orangered; background-color:gold; text-shadow: #444 1px 2px;">キャラプロフィール</div>
次のように表示されます。 なお、見出しっぽく見せるために、text-shadowを使って文字に影も入っています。
"text-align: center;"で、ブロックの中のテキストがセンタリングされます。
centerは別の値にすることもでき、rightを指定すると右よせになります。
例えば、下のような入力例を作ることができます。
◆名前
<div style="text-align: right; border-top: 1px solid; padding: 2px;">パープル＝レンド</div>
次のように表示されます。横幅を１／３ぐらいに減らせば、味わいのあるレイアウトになるかも知れません。
text-alignでセンタリングできるのはテキストだけです。 divやpで囲まれたブロックはセンタリングされません。 右よせも同様です。
文章の説明だけではわかりにくいので、具体例を用いて説明します。次のように入力してみてください。
<div style="text-align: center;">テキスト１</div>
<div style="text-align: center;"><div style="width: 320px; background-color: pink;">テキスト２</div></div>
次のように表示されます。
テキスト１とテキスト２の表示のされかたが違います。それぞれ次のような違いがあります。
| 違う点 | テキスト１ | テキスト２ |
| 構成 | １つのdivがあり、その中にテキスト１がある。 | ２つのdivがあり、入れ子になっている。 内側divの中は横幅が３２０ピクセルで背景はピンク。 その中にテキスト２がある。 内側divは外側divの中にある。 |
| センタリング | テキスト１はセンタリングしている。 | ピンクの背景は左にある。 つまり、外側divからみたとき、内側divは左よせしている。 テキスト２はピンク背景の中央にある。 つまり、内側divからみたとき、テキスト２はセンタリングしている。 |
テキスト２がピンク背景の中でセンタリングしているのは、外側divのtext-alignの設定が内側divにも影響をあたえているからです。 このように、CSSの中には入れ子になっているdivの外側が内側に影響を及ぼすものとそうでないものもあります。 このあたりの話は私もあまり詳しくないので、検索して調べてください。
シンプルなレイアウトその４はブロックのセンタリングです。 前述したように、ブロックはtext-alignではセンタリングできません。 別の指定を行う必要があります。
ブロックをセンタリングする方法で最も簡単なのはmarginを使う事です。 「外側の余白」の例でも説明したように、marginを使って左右に同じ大きさの余白を設定すればブロックはセンタリングされます。
ブロックの横幅が指定されている場合、次のような指定をしてもセンタリングされません。
（ここからの話はtext-alignは不要なので削除しました。ピンクの中のテキストはセンタリングされなくなっています。）
<div style="margin: 0 100px; width: 320px; background-color: pink;">横幅がきまっているとき</div>
上の例では"margin: 0 100px;"で左右に１００ピクセルの余白を指定しています。
ブロックの横幅が決まっている時は、
ブロックの横幅と外側の横幅から余白サイズを逆算し、それをmarginに設定すればセンタリングされたように表示されます。
<div style="margin: 0 160px; width: 320px; background-color: pink;">横幅がきまっているとき</div>
センタリングに丁度良い余白サイズを毎回計算するのは大変です。そんなときauto指定を使うと楽です。
次の入力例を見てください。（表示例では、比較のために計算したピクセル数を指定するケースも一緒に並べています。）
<div style="margin: 0 auto; width: 320px; background-color: pink;">margin auto指定</div>
次のように入力すると右よせもできます。
<div style="margin-left: auto; width: 320px; background-color: pink;">margin autoによる右よせ</div>