　ボックスについて

■　ボックスについて

ボックスとは、それぞれの要素(タグ）が持っている四角形の範囲内のことをいいます。

例えば、一つの段落があるとすれば<p>～</p>の範囲が一つのボックスになります。

ボックスは、テキストなどの内容と枠線までの余白を設定するパディング、そしてパディングを囲む枠線、それから他のボックスとの間隔を設定するマージンで構成されています。

この説明だけではわかりにくいと思いますので下のボックスの例を見て下さい。

ここが、段落の内容、つまり、本文となるところです。このまわりは、オレンジ色の背景色になっていますが、この部分のことをパディングといいます。さらに、パディングは、赤色の枠線で囲まれています。そして枠線から外側の余白を設定するのがマージンです。ボックスは、これらの要素により構成されています。

何となくわかりましたか？ようするに段落の左右や上下にスペースを入れたり（マージン)、段落を枠線で囲んだり、枠線と文章の間隔（パディング）を空けたり出来るということです。

これらのボックスを構成するマージンやパディング、そして枠線にいろいろな設定をすることによって、HTMLでは出来なかったことがいろいろ出来ます。

サンプル - Microsoft Internet Explorer

今日は、大好きなHIP-HOPを聞きながらサイトの更新作業中♪サイトの管理大変だけど、ぼちぼち頑張ります（笑）

HTML&CSS

<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
.box  { margin:10pt;
        padding:10px;
        border:2px dashed #dc143c;}
-->
</style>
</head>
<body>
<p> 今日は、大好きなHIP-HOPを聞きながらサイトの更新作業中♪サイトの管理大変だけど、ぼちぼち頑張ります（笑）</p>
<p class="box">今日は、大好きなHIP-HOPを聞きながらサイトの更新作業中♪サイトの管理大変だけど、ぼちぼち頑張ります（笑）</p>
</body>
</html>

ボックスについて

■ ボックスについて

　ボックスについて

■　ボックスについて