ボーダー系プロパティ
borderのスタイルをいろいろ指定してデザインすることができる
枠線を引くことで、HTML要素を強調したい場合や、位置調整時に一時的に枠線を表示して調整する場合などに利用することができます。
ボーダースタイル border-style: ボーダーのスタイル;
- none（初期値）
ボーダーは、表示されず太さも 0 になります。他のボーダーと重なる場合は、他の値が優先されます。 - solid 1本線
- double 2本線
- dashed 破線
- dotted 点線
ボーダースタイルは複数指定した数により対象位置が変わる
- 1つ指定「上下左右」すべての指定サイズになる
- 2つ指定「上下」「左右」の順番で指定
- 3つ指定「上」「左右」「下」の順番で指定
- 4つ指定「上」「右」「下」「左」の順で指定
ボーダー色 brder-color: ボーダーの色;
- 色も指定することができる
- 透明指定することができる… transparent
- 1（上下左右）.2（上下）（左右）.3（「上」「左右」「下」の順番で指定）.4（「上」「右」「下」「左」の順で）指定で一括で指定することもできる
ボーダー幅 border-width: ボーダーの幅;
- ボーダーの幅を指定することができる
- 1（上下左右）.2（上下）（左右）.3（「上」「左右」「下」の順番で指定）.4（「上」「右」「下」「左」の順で）指定で一括で指定することもできる
ボーダー上下左右一括指定 border: ボーダー一括指定;
ボーダーのスタイル・色・幅を一括して指定（ショートハンド）します。
（例：border: 1px #000 solid;）
破線とか点線とか2本線とか
ボーダー上下左右一括指定 （border-top/-bottom/-left/-right）
- border-top: 上のボーダー一括指定;
- border-bottom: 下のボーダー一括指定;
- border-left: 左のボーダー一括指定;
- border-right: 右のボーダー一括指定;
パディング系プロパティ
- padding-top: 上のパディング幅;
- padding-bottom: 下のパディング幅;
- padding-left: 左のパディング幅;
- padding-right: 右のパディング幅;
- 1（上下左右）.2（上下）（左右）.3（「上」「左右」「下」の順番で指定）.4（「上」「右」「下」「左」の順で）指定で一括で指定することもできる
マージン上下左右 （margin-top/-bottom/-left/-right プロパティ）
- margin-top: 上のマージン幅;
- margin-bottom: 下のマージン幅;
- margin-left: 左のマージン幅;
- margin-right: 右のマージン幅;
注意事項！
- マージンの相殺（あんまり理解していないので後で復習するところ）
（上部のボックスの下マージンと下部のボックスの上マージンが接する時は大きい方のマージンが採用されます。） - マイナスマージン
・マージンにはマイナスの値を指定することができる
・マイナスの値を指定するとほかのボックスに重なって配置することができる - ボックスの中央配置
