今日は、二つ目の投稿で少し疲れ気味ですが、前回のに書いたように階層を少し意識して見やすく書けるように努力していきたいと思います。私の勉強ノートを活用してもらえると嬉しいです。
CSS 基礎・基本 margin padding
ページレイアウトの一つの機能であるmargin,paddingについて理解し扱えるよようにしていきます。
ボックスモデル
要素のサイズに大きくかかわってくるボックスモデルについて
border
marginとpaddingの境界をわかりやすくするために、枠線を指定。.box { border: 3px solid #777; }
padding
.boxの内側の余白を設定！
これにより、効果範囲をさらにチェック！.box { padding: 20px; }
margin
.boxの外側の間隔を設定！
これも、同様にやってみると効果範囲を実感できます。.box { margin: 20px; }
height
.boxの高さを設定！.box { height: 150px; }
width
.boxの幅を設定！.box { width: 150px; }
すべての要素はボックスと呼ばれる四角形の領域を持っている。
各ボックスは、content area,padding,border,marginの領域がある。これらを、ボックスモデルを呼びます。
ボックスモデルの計算ルール
ボックスモデルの計算ルールの変更にはbox-sizingを利用する。box-sizingは、要素の高さと幅を計算するルールを決めれる。
最初はcontent-boxになっている。
- content-box:heightとwidthで指定した領域内には、paddingと
borderとmarginは含まれない。 - border-box:heightとwidthで指定した領域内に、
paddingとborderも含まれる。
paddingの指定方法！
さまざまなpaddingの指定方法について
上下左右同時に
.box内側に上下左右同時に余白を設定！.box { padding: 20px;}
上下と左右分けて
.boxの内側に上下と左右に分けて空白を設置！.box { padding: 20px 50px;}
20pxが上下、50pxが左右
上と左右と下を分けて
.boxの内側に上と左右と下を分けて空白を設置！.box { padding: 20px 50px 100px;}
上に20px 左右に50px 下に100px
上下左右を別々に
.boxの内側に上下左右を分けて空白を設置！.box { padding: 20px 50px 100px 150px;}
上に20px 右に50px 下に100px 左に150px
paddingのプロパティ
paddingは、４つのルールからできておりそれは、padding-top,padding-right,padding-bottom,padding-leftである。
これらを簡略化して書いたものが先ほどまでの例である。
mariginの指定方法！
こちらにも、同様の様々な指定方法があります。どれも同じなので違うところだけ書きます。
marginのプロパティ
marginも、４つのルールからできています。margin-top,margin-right,margin-bottom,margin-leftです。
marginのセンタリング
.boxの外側の間隔をセンタリング配置.box{ margin:20px auto;}
autoは要素の間隔を適切な値に置き換えます。
marginの相殺
隣り合う要素同士で起こる相殺についてmarginの相殺とは、隣り合う要素同士でmargin-topとmargin-bottomの値が比較され、大きいほうが適用される。
入れ子でのmargin
入れ子になった要素同士でもmarginの相殺は起きる。
子要素のmarginが`親より大きい場合は、子要素は親要素の外側にはみ出します。
marginの相殺を制御1
marginの相殺は、隣り合う要素のborderがあるときは上下の境界となるため相殺は発生しなくなる。
また、paddingやheightやmin-heightの場合も相殺は発生しない。
marginの相殺を制御2
テキストなどのようなインラインコンテンツがある場合も、相殺が発生しなくなる。
ネガティブmargin
ネガティブmarginの設定
ネガティブmarginを設定！ネガティブmarginを設定するには、marginの値をマイナスにする。
margin-top: -50px;
ネガティブマージンを指定された要素は、値が指定された方向に進む。
左右にネガティブmargin
左右のネガティブmarginではwidthを設定してない要素の左右に要素が広がる
widthと併用した場合、widthの値が優先される。
ネガティブmarginはleftが優先されるため左に引っ張られる。
今日はここで終わります。
一応階層を作ってみましたがまだまだ分かりにくいところが多いかもしれません。次書くときに、またきれいにできればと思います。