marginとpaddingの違いを簡単に解説

2023-04-27

当記事では、Webデザインに欠かせないCSSのmarginとpaddingについて解説します。

~目次~

1. marginとpaddingとは何か？

marginとは、HTML要素の外側の余白を指します。要素同士の距離を調整したり、要素と背景の間隔を調整するのに使用します。marginは、下記のような書式で指定できます。

CSS

margin: 上 右 下 左;

paddingは、HTML要素の内側の余白を指します。要素内のコンテンツと境界線との間隔を調整するために使用されます。paddingは、下記のような書式で指定できます。

CSS

padding: 上 右 下 左;

marginとpaddingは、役割が異なります。marginは、要素と要素の間隔を調整するために使用されますが、paddingは、要素内のコンテンツと境界線との間隔を調整するために使用されます。

marginとpaddingは、要素に対して異なる効果をもたらします。marginは、要素の周囲に余白を追加するため、要素自体のサイズに影響を与えません。一方、paddingは、要素内部に余白を追加するため、要素のサイズに影響を与えます。

marginとpaddingの使用方法も異なります。marginは、要素同士の距離を調整するために使用されますが、paddingは、要素内のコンテンツと境界線との間隔を調整するために使用されます。

marginは、下記のように指定できます。

CSS

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

または、短縮形でも指定できます。

CSS

margin: 10px 20px 30px 40px;

paddingは、下記のように指定できます。

CSS

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

または、短縮形でも指定できます。

padding: 10px 20px 30px 40px;

以下に、marginとpaddingの実例を示します。

HTML

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 10px;
}

上記のコードでは、.boxクラスを持つ要素に対して、上下左右に10pxの余白を追加しています。これにより、各要素の間隔が10pxになり、綺麗なレイアウトを作ることができます。

HTML

<div class="container">
  <div class="box">テキスト</div>
</div>

CSS

.box {
  width: 200px;
  height: 100px;
  background-color: yellow;
  padding: 20px;
}

上記のコードでは、.boxクラスを持つ要素に対して、上下左右に20pxの余白を追加しています。これにより、要素内のテキストと境界線の間隔が20pxになり、読みやすいテキストを作ることができます。

CSSのmarginとpaddingは、Webデザインにおいて非常に重要な役割を持っています。本記事では、marginとpaddingの定義や違い、指定方法、実例などについて解説しました。適切に使用することで、より美しく読みやすいWebサイトを作ることができます。