[CSS] Gap

Gap

'내부의 children 요소'들이 일정한 간격으로 떨어져 위치할 수 있게 사용하는 요소

grid 혹은 flex에서 사용 가능하다.

 

margin과의 차이점 

 

-> gap 스타일 속성은 인접한 요소가 있을때만 Gap을 만든다

 

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

 

호환성

 

출처 : https://caniuse.com/?search=GAP

메이저 브라우저는 전부 지원하는거 같은데 앞으로 호환성이 더 좋아지면 편리하게 쓸 수 있을것으로 기대된다.

 

ref

 

https://webisfree.com/2020-12-05/[css]-%EC%8A%A4%ED%83%80%EC%9D%BC%EC%86%8D%EC%84%B1-gap%EC%9D%84-flex%EC%97%90%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 

[css] 스타일속성 gap을 flex에서 사용하기