본문 바로가기
카테고리 없음

CSS gap

by extrmk 2024. 11. 17.

row-gap 행간 사이, column-gap 열간 사이 값을 지정하는 단축속성

multi-column, flex, grid container 에 적용된다.

 

column-gap 값이 생략된 경우 row-gap 값과 동일한 값으로 처리한다.

columns, flex-items, grid-lines, grid-lines 를 분리하는 넓이값 또는 퍼센티지

 

설명 

갭은 지정된 크기의 넓이 또는 높이를 가지는 빈 공간을 만든다. 요소간 보이는 빈 공간은 margins, paddings, alignment 값이 각각 다르기 때문에 gap 값과 다를 수 있다.

 

예시

style="display: flex; gap: 5%;"

style="display: grid; gap: 10px;"

* 위 항목들을 태그로 제공 예정