CSS - Gap 속성 사용법 margin과의 차이점

Gap이란?

grid와 flex 요소 행과 열에 간격을 지정할 수 있습니다.

margin은 요소 외부에 여백이 생성되지만, gap 속성은 요소 내부에 지정 됩니다.

 

margin은 첫번째, 마지막 요소에 여백을 제거하기 위해서 first-child, last-child 구문을 쓰기도 하였지만,

gap 요소 내부에 간격이 생기기 때문에 간편하게 사용할 수 있습니다.

 

단, ie 브라우저에서는 지원하지 않습니다.

 

사용법

{
   gap: 10px;
}

{
   gap: 10px 20px; // row-gap, column-gap
}

예시

See the Pen Untitled by powerku (@powerku) on CodePen.