【marginとpadding】HTMLの余白の調整【現役エンジニアが解説】

PROGRAM

今回は、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の全ての書き方を挙げており、線の太さやスタイル、色は好みのものを指定することになります。