【CSS】margin-topとmargin-bottomはどちらを使用した方が良いか

CSS Design
  • marginは、隣接する側のコンテンツの余白を意味する。
  • marginは、隣接する側のコンテンツに指定する。
  • webサイトは、左上を起点として、右と下にコンテンツを追加していく。
  • 左右に隣接したコンテンツの場合、隣接するコンテンツは右にあるコンテンツである場合が多い。
  • 上下に隣接したコンテンツの場合、隣接するコンテンツは下にあるコンテンツである場合が多い。

margin-topを使用する場合

.item + .item {
  margin-top: 10px;
}

.item + item {
  margin-left: 10px;
}

margin-bottomを使用する場合

.item:not(:last-child){
  margin-bottom: 10px;
}

.item:not(:last-child){
  margin-right: 10px;
}