CSS　〜　レイアウトモデル：ボックス

CSS3 CSS

いつも忘れるので、ボックスのpadding,border,marginプロパティ,widthプロパティ,heightプロパティを図で理解する。

まず、CSSはボックス単位を基本にしてレイアウトされる。
それで、１つのボックスは図のように4つの部分から構成される。

  • content：内容
  • padding：contentとborderの間の余白
  • border：境界線
  • margin：borderと他のボックスの間の領域

さらに、contentの幅と高さはwidthプロパティとheightプロパティで指定することができる*1。

padding領域をの上下左右の幅、borderの上下左右の幅も指定することができる。これは図とコードの両方を見比べた方が理解しやすい。

<style>
#cssGradient h2{
                /* padding: t r b l と書くと上下左右の幅がそれぞれ、t,b,l,rとなる。図と比較してほしい。*/
		padding: 1em 0 1em 0;
                
                /* borderの幅もpaddingと同様の方法で指定できる*/
                /* 下記はborder: 0と指定しても同じ*/
                border-width: 0 0 0 0;
	}
</style>
<html>
<div id="cssGradient">
<h1>CSS3でグラデーション</h1>
<input type="button" id="gradient1CSS" value="gradientをつける">
<h2 id="gradient1">background:-moz-linear-gradient(gradientの方向、開始色、中間色　中間色の位置、終了色)</h2>
</div>
</html>

他にも、境界線の色をborder-colorで指定したり、境界線のスタイルをborder-styleで指定することができる。

*1:インラインボックスでは、widthやheightは基本的に効かない。これは、親ボックスによって自動的に調整されるためだ。