요소 사이의 간격에는 gap을 사용하자

퍼블리싱을 하다보면 리스트를 많이 보게 된다. 아래와 같은 목록에서, 자녀들 사이의 간격을 8px로 설정하고 싶다면 어떻게 코드를 쓸 것인가?

<div class="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div> 

아마도 아래와 같은 코드를 쓸 것이다.

.parent {
  div:not(:last-child) {
    margin-bottom: 8px;
  }
}

그런데 만약 자녀들 중 div가 아닌 요소가 들어간다면 위 css는 그 요소에는 적용되지 않는다. 물론 *:not(:last-child) 를 사용할 수도 있지만, 아래와 같이 하면 깔끔하다.

.parent {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

개인적으로는 :last-child, :first-child 등을 고려해가며 margin-bottom, margin-right 등을 쓰는 것보다, gap이 직관적이므로 선호한다. display: grid;의 경우는 column-gap, row-gap을 따로 줄 수도 있어 편리하다. 우리가 흔히 레이아웃에 사용하는 div 태그의 경우 블록 요소이기 때문에 디폴트가 display: block;이지만, 작업을 하다보면 레이아웃의 특정 영역들을 밀고 당기고 해야할 경우들이 생긴다. 그럴 경우 block과 margin을 통한 레이아웃보다는 display: flex; flex-direction: column; 하에서 작업하는 것이 편리한 경우가 많다. (e.g. 높이가 고정된 상태에서, 그 컨테이너 내부의 요소들이 동일한 간격으로 벌어지게 하려면 column flex + justify-content: space-between;이 정답이다.)