★CSSの基本

CSSソース

div.sample {
width:200px; height:100px;
margin:5px; padding:10px; border:1px solid black;
background-color:lightgray;
}

HTMLソース

<div class=”sample” >ボックスサイズの算出</div>

【ボックス全体の高さ】 ＝ （内容領域の高さ100px）＋（上下マージン5px×2）＋（上下パディング10px×2）＋（上下ボーダー1px×2） ＝ 132px

CSSソース

.sample1 {
margin:10px; padding:10px; border:5px solid black;
background-color:lightgray;
}

.sample2 {
margin:10px; padding:10px; border:5px solid black;
background-color:lightgray;
line-height:60px;
}

HTMLソース

<h3>ブロックボックス</h3>
<p class=”sample1“>
池のほとりにかえるが住んでいました。かえるは自分の名前があまり好きではありませんでした。「かえるなんて名前より、もっとふさわしい素敵な名前があるはずだよ。」かえるはまいにちそう考えて暮らしていました。ある朝かえるは思いました。「そうだ、神様にお願いして新しい名前をつけてもらおう。神様ならきっと素敵な名前をつけてくださるはずだよ。」そう思うといてもたってもいられなくなり、かえるは神様のところへ出かけました。
</p>

<h3>インラインボックス</h3>
<p>
<span class=”sample2“>
池のほとりにかえるが住んでいました。かえるは自分の名前があまり好きではありませんでした。「かえるなんて名前より、もっとふさわしい素敵な名前があるはずだよ。」かえるはまいにちそう考えて暮らしていました。ある朝かえるは思いました。「そうだ、神様にお願いして新しい名前をつけてもらおう。神様ならきっと素敵な名前をつけてくださるはずだよ。」そう思うといてもたってもいられなくなり、かえるは神様のところへ出かけました。
</span>
</p>