marginプロパティとは？CSSの基本概念を簡単解説

Contents

CSSはWebページのレイアウトを指定する際に欠かせない技術です。その中でもmarginプロパティは、要素の外側の余白を指定するために使われます。今回はmarginプロパティについて、基本的な概念を簡単に解説します。

marginプロパティは、HTML要素の外側にある余白を指定するために使用されます。余白は、要素の周りにある空間のことで、marginプロパティを使用することで、要素の周囲に余白を作り出すことができます。marginプロパティには、上下左右の余白を指定することができる値が存在します。

marginプロパティには、以下のような値を指定することができます。

値を指定する際は、単位を指定することができます。代表的な単位としては、px（ピクセル）、em（フォントサイズに対する倍率）、%（親要素に対する割合）などが存在します。

marginプロパティは、Webページのレイアウト設定に密接に関わるため、その使い方は慎重に決める必要があります。特に、marginプロパティを過剰に使用しすぎると、余白があまりにも大きくなり、Webページ全体のバランスが崩れてしまう可能性があります。

例えば、以下のようなCSSコードを考えてみましょう。

p {
  margin: 20px;
}

この場合、p要素の上下左右に20pxの余白が設定され、要素の周囲に余白が作られます。

marginプロパティは、CSSを使ったWebページのレイアウト設定に欠かせないプロパティです。余白を設定することで、要素をより見やすく、美しくすることができます。しかしながら、使いすぎには注意し、Webページ全体のバランスを見ながら使い方を決めることが大切です。

参考記事