画像を見やすく

画像を左に寄せる

画像を右に寄せる

文字の間隔を変える

行の間隔を変える

文字の間隔を変える

タイトル付ボックス

タイトル付ボックス

ボックスを右に寄せる

ボックスを２つ並べる

フォトスタンド風画像わく

画像に枠を付ける

中央に寄せて表示する

２つ横に並べる

幅いっぱいとは、ボックスの幅がブラウザの表示上最大になることを言います。通常のボックスではデフォルトで幅が100%なので特に指定する必要はありません。枠の線の幅は、3pxで指定していますが。お好みで変えてください。solidは、通常の線ですが、doubleやdotted、dashedなどの指定もあります。試してみてください。

これだと枠と文字がくっついて見栄えがよくありません。枠と文字の間をすこし開けてみましょう。

ボックスを右によせて、メインの文章は回り込みさせます。floatを使ってボックスを設定する場合、デフォルトの幅は0%になります。すなわち、中身の分の大きさが確保されることになります。そのため、ちゃんとレイアウトする場合には、幅を明確に指定しなくてはなりません。幅の設定は、「％」で全体の幅の相対で指定する方法と「px」や「em」などで明確に数値で設定する方法があります。floatで回り込みを使う場合には、「px」や「em」で指定するほうがレイアウトしやすいです。

サンプルだとよくわからないのですが、メインの文字とボックスの間の隙間がなく、場合によってはぴったりくっついてみづらくなります。そのため、ボックスの左側に隙間を空けるように指定します。下のサンプルを見ていただくとお解りかもしれませんが、ボックスのサイズが小さくなります。これはfloatのサイズが150pxで設定してる中に隙間を10px空けているため10px小さくなっています。

背景色を付けた枠付きボックスです。サンプルでの色の指定は、色の名前で設定していますが、RGB形式（#ffffff形式）で設定することもできます（RGB形式のほうが希望通りの色が出る）。

HTMLのサンプルを見ていただくとわかりますが、background-colorを設定しているだけです。次のサンプルは、先ほどの右寄せボックスで左に隙間ありのサンプルに背景色をつけてみます。

次のサンプルはおまけですが、枠なしボックスで背景色のみを設定するものです。見た目にシンプルにレイアウトするときには有効な方法だと思います。