marginを指定したときの表示

空色・・・そらいろ

青空は季節によってかなり濃さが違ってくる
天空と低空でも違って見える
「空色」と言う色見本に近いのは待ちこがれたいた春の明るい空の
地平線近くの色だろうか
「天色」を「てんしょく」と読めば空模様のことだが
「あまいろ」とか「そらいろ」と読むことで明るい青空の色になる

marginを指定すると、罫線の外側に余白が入ります
marginで指定した余白が重複する場合は値の大きい方が適用されます
そのため「margin:50px」と指定したh2(見出し)とp(文章)間の余白は50pxでなく、100pxです。
以下がソースです。


<html>
<head>
<title>色の景色</title>
<style type="text/css">
<!--

body{color:#333333;background-color:#e7e0e1}
h2{font-size:16px;color:#45466b;
  background-color:#dbe9dd;
  border-style:solid;
  border-width:4px;
  border-color:#377c5f;
  margin:50px}//h2(見出し)に対する余白
p{border-style:solid;
 background-color:#c1c5d7;
 border-width:4px;
 border-color:#98d1e9;
 margin:100px}//p(文章)に対する余白
--></style>
</head>
<body>

<h2>空色・・・そらいろ</h2>
<p>
青空は季節によってかなり濃さが違ってくる<br>
天空と低空でも違って見える<br>
「空色」と言う色見本に近いのは待ちこがれたいた春の明るい空の<br>
地平線近くの色だろうか<br>
「天色」を「てんしょく」と読めば空模様のことだが<br>
「あまいろ」とか「そらいろ」と読むことで明るい青空の色になる</p>
</body>
</html>