CSS row-gap 속성

정의와 사용법

row-gap 속성은 엘라스틱 브릭이나 그리드 레이아웃에서 행 사이의 간격을 정의합니다.

row-gap 속성은 이전에 grid-row-gap。

다른 것도 참조하세요:

CSS 강의:CSS 그리드 레이아웃

CSS 강의:CSS 엘라스틱 브릭 레이아웃

CSS 참조 설명서:gap 속성

CSS 참조 설명서:column-gap 속성

인스턴스

예제 1

그리드 행 사이의 50 픽셀 간격을 정의합니다:

#grid-container {
  display: grid;
  row-gap: 50px;
}

직접 시도해 보세요

예제 2: 엘라스틱 브릭 레이아웃

엘라스틱 브릭 레이아웃에서 행 간격을 70px로 설정합니다:

#flex-container {
  display: flex;
  row-gap: 70px;
}

직접 시도해 보세요

CSS 문법

row-gap: length|normal|initial|inherit;
값 설명
length 행 사이 간격을 지정된 길이나 백분율 값으로 설정합니다.
normal 기본 값. 행 사이의 정상 간격을 정의합니다.
initial 이 속성을 기본 값으로 설정합니다. 참조: initial。
inherit 부모 요소에서 이 속성을 thừa kế합니다. 참조: inherit。

기술 세부 사항

기본 값: normal
thừa kế: 아니요
애니메이션 제작: 지원됩니다. 별도의 속성을 참조하세요. 참조:애니메이션 관련 속성。
버전: CSS 박스 정렬 모듈 레벨 3
JavaScript 문법: object.style.rowGap="50px"

브라우저 지원

테이블에서의 숫자는 이 속성을 최초로 지원하는 브라우저 버전을 나타냅니다.

레이아웃 크롬 IE / 엣지 파이어폭스 사파리 오페라
그리드 안에서 66 16 61 12 53
엘라스틱 브릭 안에서 84 84 63 14.1 70