境界線の要素
border,margin,paddingを使う
borderの記述の仕方
border: 太さ スタイル 色;
と記述する。
(例)
border: 1px solid white;
👉太さ1px、1本線、白い線を引くことになります。
paddingの記述
paddingは上下左右4方向に指定できます。
- padding: 1px; [上下左右]の内側の余白をまとめて1pxに指定
- padding: 1px 1px; [上下][左右]の内側の余白をそれぞれ1pxに指定
- padding: 1px 1px 1px; [上][左右][下]の内側の余白をそれぞれ1pxに指定
- padding: 1px 1px 1px 1px; [上][右][下][左]の内側の余白をそれぞれ1pxに指定
marginで余白作る方法
paddingと同様にmarginも上下左右4方向に指定できます。
- margin: 1px; [上下左右]の内側の余白をまとめて1pxに指定
- margin: 1px 1px; [上下][左右]の内側の余白をそれぞれ1pxに指定
- margin: 1px 1px 1px; [上][左右][下]の内側の余白をそれぞれ1pxに指定
- margin: 1px 1px 1px 1px; [上][右][下][左]の内側の余白をそれぞれ1pxに指定
margin-top、margin-bottom、margin-left、margin-rightを用いることで、各一方向のみの指定が可能