CSS marginとpaddingで、Webページの余白を美しく調整しよう
2024-04-02
CSSにおけるmarginとpaddingの違い
余白の場所
- margin: 要素の外側の余白を設定します。要素の枠線（border）の外側にスペースを作ります。
要素の幅への影響
- margin: デフォルトでは要素の幅に含まれません。つまり、marginを設定しても要素の幅は変わりません。
適用される要素
- margin: すべての要素に適用できます。
- padding: インライン要素には適用できません。
使い分け
- margin: 要素同士の間隔を調整したり、要素を中央に配置したりするときに使用します。
- padding: 要素の内容と枠線の間に余白を作ったり、要素の見た目を調整したりするときに使用します。
図解
例
/* margin */
.box {
margin: 10px; /* 上下左右に10pxの余白を設定 */
}
/* padding */
.box {
padding: 10px; /* 上下左右に10pxの余白を設定 */
}
上記のコードでは、marginとpaddingプロパティを使用して、.box要素の余白を設定しています。
marginとpaddingは、どちらも要素周りの余白を設定するプロパティですが、余白の場所や要素の幅への影響などが異なります。それぞれの違いを理解して、使い分けましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>marginとpaddingのサンプル</title>
<style>
body {
font-family: sans-serif;
}
.box {
width: 200px;
height: 100px;
border: 1px solid #ccc;
}
/* margin */
.margin-top {
margin-top: 10px;
}
.margin-right {
margin-right: 10px;
}
.margin-bottom {
margin-bottom: 10px;
}
.margin-left {
margin-left: 10px;
}
/* padding */
.padding-top {
padding-top: 10px;
}
.padding-right {
padding-right: 10px;
}
.padding-bottom {
padding-bottom: 10px;
}
.padding-left {
padding-left: 10px;
}
</style>
</head>
<body>
<h1>margin</h1>
<p>margin-top:</p>
<div class="box margin-top">
これはmargin-topのサンプルです。
</div>
<p>margin-right:</p>
<div class="box margin-right">
これはmargin-rightのサンプルです。
</div>
<p>margin-bottom:</p>
<div class="box margin-bottom">
これはmargin-bottomのサンプルです。
</div>
<p>margin-left:</p>
<div class="box margin-left">
これはmargin-leftのサンプルです。
</div>
<h1>padding</h1>
<p>padding-top:</p>
<div class="box padding-top">
これはpadding-topのサンプルです。
</div>
<p>padding-right:</p>
<div class="box padding-right">
これはpadding-rightのサンプルです。
</div>
<p>padding-bottom:</p>
<div class="box padding-bottom">
これはpadding-bottomのサンプルです。
</div>
<p>padding-left:</p>
<div class="box padding-left">
これはpadding-leftのサンプルです。
</div>
</body>
</html>
このコードを実行すると、以下のようになります。
marginとpaddingを設定するその他の方法
calc()関数を使用して、動的に余白を設定することができます。
.box {
margin: calc(10% + 10px); /* 上下左右に10% + 10pxの余白を設定 */
}
ショートハンドプロパティ
marginとpaddingプロパティには、ショートハンドプロパティも存在します。
.box {
margin: 10px 5px; /* 上下に10px、左右に5pxの余白を設定 */
padding: 5px; /* 上下左右に5pxの余白を設定 */
}
CSS Gridレイアウトを使用すると、要素間の余白を簡単に設定することができます。
.grid {
display: grid;
gap: 10px; /* グリッドアイテム間の余白を10pxに設定 */
}
.flex {
display: flex;
justify-content: space-between; /* 要素を左右に等間隔に配置 */
align-items: center; /* 要素を垂直方向に中央に配置 */
}
CSS変数を使用して、余白の値を動的に設定することができます。
:root {
--margin: 10px;
}
.box {
margin: var(--margin); /* margin変数の値を余白に設定 */
}
marginとpaddingを設定するには、上記以外にも様々な方法があります。それぞれの方法の特徴を理解して、最適な方法を選びましょう。
css
