【CSS】marginの使い方

CSS

「margin」は、CSSのボックスモデルの1つで、要素から周囲の要素との間隔を指定するためのプロパティです。

基本的な書き方は以下のようになります。

.example {
  margin: 上下左右;
}

上下左右の順番で指定することです。

個別に上下左右を指定する場合は以下のようになります。

.example {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

また、上下のみ or 左右のみを指定する場合は以下のようになります。

.example {
  margin-top: 10px;
  margin-bottom: 10px;
  /* 上下両方に同じ値が指定される */
}
.example {
  margin-left: 20px;
  margin-right: 20px;
  /* 左右両方に同じ値が指定される */
}

「margin」は、要素の間隔を調整するためによく使用されます。また、パディングと合わせて使用することで、要素のレイアウトを整えることができます。