CSSを理解する上で、初心者を困らせるのが、display:blockの状態のサイズについての認識です。
margin , border , paddingのそれらの意味と、値を設定した時に表示がどうなるかをちゃんと理解しないといけません。
それから、上記のサイズについて、box-sizingの設定で大きく見た目が変わってしまうので、この相関関係も理解しましょう。
margin , border , paddingについての理解
（横）200px x （縦）200px のサイズのエレメント（要素やタグ）について解説します。 セットされたmarginとborderとpaddingについてのそれぞれの範囲は次の様になります。div{
width : 200px;
height : 200px;
margin : 50px;
border : 20px solid black;
padding : 50px;
}
margin
エレメントの外側にバリアを張るイメージで、スペースを作るのが、マージン機能です。 前後のエレメントと距離をとる時に設定します。 注意点としては、インターネットブラウザの仕様で、マージンの相殺という特性があるので、これを理解していないと、設定に困ってしまいます。 以前にブログで書いたので、読んで理解してみてください。 CSSの相殺性理論border
エレメントの周囲の枠に領域を作るのが、ボーダー機能です。 border-styleで、実線、破線、ドット線など色々と表現ができます。border-style : solid; /* 実線 */
border-style : dashed; /* 破線 */
border-style : dotted; /* ドット線 */
...他にも色々と線の種類があります。
border-colorで、線の色をセットできます。
border-color : red;
border-widthで、線のサイズを指定します。
border-width:20px;
上記を纏めて次のように1行で書くことができます。
border : 20px solid red;
padding
エレメントの内側にスペースを作るのが、パッディング機能です。 borderから内側に向かって、サイズ指定することで、余白を作ることができます。 文字などは、余白が無いと、読みづらくなってしまうので、余白を付けるというのはデザインをする上で必須です。top , right , bottom , left
margin , border , padding これらの命令には、全て、エレメントに対しての上下左右それぞれに設定をすることができます。 上記のサンプルは全て、1つの値のみしか書いていないので、上下左右全て同じ値をセットしている状態です。 次のように、それぞれの方向に独自の値をセットすることもできます。margin-top
margin-right
margin-bottom
margin-left
border-top
border-right
border-bottom
border-left
padding-top
padding-right
padding-bottom
padding-left
また、上記をそれぞれ1行で書くこともできます。
値は、上右下左の順でスペース区切りで記述します。
margin : top right bottom left;
border-style : top right bottom left;
border-color : top right bottom left;
border-width : top right bottom left;
padding : top right bottom left;
box-sizingの理解
margin , border , padding の特性が理解できたところで、次はbox-sizingについて理解しておきましょう。 box-sizingには、content-boxとborder-boxの２つの値があり、それぞれ見え方が異なります。content-box
エレメントにセットされている、paddingとborderのサイズは含まれずに表示されます。div{
width:200px;
height:100px;
padding:10px;
border:10px;
}
content-box
border-box
エレメントにセットされている、paddingとborderのサイズを含んだサイズで表示されます。div{
width:200px;
height:100px;
padding:10px;
border:10px;
}
border-box
オススメ
明らかに、border-boxの方がコントロールしやすいので、個人的にはページ内の全てのエレメントに、box-sizing:border-boxをセットするようにしています。#NumberPlace *,
*::before,
*::after{
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
o-box-sizing : border-box;
-ms-box-sizing : border-box;
box-sizing : border-box;
}
