HTMLでの幅、高さ、余白の考え方をボックスモデルと言います。まず、幅や高さの基準となる内容（コンテント領域）があります。この幅がwidth、高さがheightとなります。
そして、このコンテント領域に枠線を表示するのがborderとなります。枠線が表示されると、枠線の領域の幅と高さがwidth/heightと考えがちですが、注意しなければなりません。borderの内側にはpadding、外側にはmarginと呼ばれる余白があるのです。
かつてはこのルールに従いレイアウトを作成しなければならなかったので、計算が大変でしたが、CSS3では新たにbox-sizingというプロパティにより、余白や枠線もwidthやheightに含めるという指定が可能となりました。
これにより、余白の大きさや枠線の太さを固定で指定できない、レスポンシブサイトでの設定がしやすくなりました。
| プロパティ | 値 | 備考 |
|---|---|---|
| box-sizing | content-box border-box | 幅や高さに枠線と余白を含まない（デフォルト） 幅や高さに枠線と余白を含む |
幅や高さを指定する
| プロパティ | 値 | 備考 |
|---|---|---|
| width | 数値＋単位 パーセント指定 | コンテント領域またはボックスの幅 |
| height | 数値＋単位 パーセント指定 | コンテント領域またはボックスの高さ |
余白を指定する
| プロパティ | 値 | 備考 |
|---|---|---|
| margin | 数値＋単位 パーセント指定 | 他の要素との余白（枠線の外側の余白） |
| padding | 数値＋単位 パーセント指定 | 内容との余白（枠線の内側の余白） |
罫線を指定する
| プロパティ | 値 | 備考 |
|---|---|---|
| border-style | solid double dashed dotted ridge groove inset outset none | １本線 ２本線 破線 点線 山線 谷線 内側が凹んで見える線 内側が浮き上がって見える線 線なし |
| border-width | 数値+単位 thin medium thick | 細線 中線 太線 |
| border-color | 色名 色コード | カラーネームによる指定 #RRGGBB、rgb()、rgba()による指定 |
| border | [style] [width] [color] | 線種、線の太さ、線の色をまとめて指定 |
See the Pen
2-10_1 by Koji Seto (@yseseto)
on CodePen.
枠線の設定には、線の種類、線の太さ、線の色があります。これらをまとめて設定できるborderプロパティもあります。また、-top / -left / -right / -bottomをつけることにより、上下左右個別に枠線を設定することもできます。