【marginとpadding】HTMLの余白の調整【現役エンジニアが解説】
今回は、HTMLの余白の調整について、marginとpaddingに分け、簡単に解説していきます。
marginで余白を調整
スタイルのmarginプロパティでは要素の外側の余白を調整できます。
marginの書き方は、上下左右、上下と左右、上と右と下と左、単一の4パターンです。
margin:5px; /* 上下左右に5px */ margin:4px 2px; /* 上下に4px、左右に2px */ margin:1px 2px 3px 4px; /* 上に1px、右に2px、下に3px、左に4px */ margin-top:5px; /* 上に5px */ margin-right:5px; /* 右に5px */ margin-bottom:5px; /* 下に5px */ margin-left:5px; /* 左に5px */
上記のコードでは、marginの全ての書き方を挙げており、これらをスタイルで指定すると余白を調整できます。
paddingで余白を調整
スタイルのpaddingプロパティでは要素の内側の余白を調整可能です。
paddingの書き方も、上下左右、上下と左右、上と右と下と左、単一の4パターンです。
padding:5px; /* 上下左右に5px */ padding:4px 2px; /* 上下に4px、左右に2px */ padding:1px 2px 3px 4px; /* 上に1px、右に2px、下に3px、左に4px */ padding-top:5px; /* 上に5px */ padding-right:5px; /* 右に5px */ padding-bottom:5px; /* 下に5px */ padding-left:5px; /* 左に5px */
上記のコードでは、paddingの全ての書き方を挙げており、これらをスタイルで指定することで余白を調整可能です。
borderで境界線を引く
スタイルのborderプロパティでは、marginとpaddingの間に実線を引けます。
borderの書き方は、上下左右か単一の2パターンのみで、marginやpaddingのようには書けません。
border:1px solid #000; /* 上下左右に1pxの黒の実線 */ border-top:1px solid #000; /* 上に1pxの黒の実線 */ border-right:1px solid #000; /* 右に1pxの黒の実線 */ border-bottom:1px solid #000; /* 下に1pxの黒の実線 */ border-left:1px solid #000; /* 左に1pxの黒の実線 */
上記のコードでは、borderの全ての書き方を挙げており、線の太さやスタイル、色は好みのものを指定することになります。