上下に並んだ<div>..</div>を左右に配置させ、マージンを指定 #CSS

とても簡単なことだが、CSSを今回初めてちゃんと触ったので、
上下に並んだ<div>..</div>を左右に配置させる方法について残しておく。

例えば、HTMLが下記のような場合に、

<html>
<head>
<title>CSSテスト</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="testsite">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
</div>
</body> 
</html>

CSS（今回の場合、test.css）で、以下のようにすると、

CSS（スタイルシート）

#testsite {
}

#1 {
}

#2 {
    float: left;
}

#3 {
    float: right;
}

#4 {
}

"2"の右側に、"3"が入りこみ
画面上、横並びに表示できる。

また、その際、マージンと余白についても考慮するなら、

マージン指定　｛ margin: [マージンの長さ]; ｝
余白の指定    ｛ padding: [余白の長さ]; ｝
枠の指定       ｛ border: [線の太さ] [線のスタイル] [線の色]; ｝

のように指定する。

※コンテンツと枠の間にある間隔が余白（padding）。枠の外側部分がマージン（margin）。
背景色や背景画像を設定した場合は、枠の内側に適用され、マージン部分は透過色となるので背景は付かない。

・マージン（margin）の指定において、
{ margin 10px; }のように
上下左右の４方向について、すべて同じマージンを指定することもできるが、

個別に、{ margin 10px 15px 10px 15px; }（margin（上）（右）（下）（左））
などと、上下左右のマージンをそれぞれ別に指定したり

{ margin-top 10px; } 、{ margin-bottom 10px; }、
{ margin-left 10px; }、{ margin-right 10px; }
などと、特定の場所のマージンだけ指定したりすることもできる。

・余白（padding）に関してもマージンと同じように指定できる。

・枠（border）の指定における線のスタイルとしては

none   :枠線なし
solid  :実線
double :二重線
dotted :点線

などがある。