gap 간격

개념 이해하기

gap은 컨테이너 자식 사이에만 간격을 만들며 바깥 가장자리에는 공간을 추가하지 않습니다. row-gap과 column-gap을 따로 지정할 수 있고, 자식의 순서나 줄바꿈이 바뀌어도 일관된 간격을 유지합니다.

gap에 값을 두 개 쓰면 앞의 10px가 줄 사이 간격, 뒤의 16px가 같은 줄 항목 사이 간격이 됩니다. 지금은 태그 네 개가 한 줄에 들어가 16px 간격만 보이고, 화면이 좁아져 flex-wrap으로 줄이 바뀔 때 비로소 10px 줄 간격이 드러납니다. 태그 span의 위아래 padding 9px는 flex 항목의 높이에 그대로 포함되므로 두 줄로 감겨도 태그끼리 겹치지 않습니다.

gap은 grid와 flex, 다단 레이아웃에서 쓸 수 있고 일반 블록 흐름의 형제 사이에는 적용되지 않습니다. 세로로 쌓인 블록 사이 간격을 gap으로 관리하고 싶다면 부모를 display: flex와 flex-direction: column으로 바꾸거나 display: grid로 만듭니다.