Properties

Properties

Editing
  • account_tree
  • bug_report

column-gap

컬럼(열)과 컬럼(열) 사이의 간격을 지정한다.

설명

Flex, Grid 레이아웃에서 사용시에는 반드시 웹브라우저 지원 현황을 확인하도록 한다. 이 글을 작성하는 시점 기준으로 Flex 레이아웃에서는 대부분의 웹브라우저가 지원하지 않는다.

Grid 레이아웃에서는 주요 웹브라우저에서는 grid-gap이라는 속성으로 대체한다.

대부분의 주요 웹브라우저가 다중 컬럼에서는 사용가능하다.

사용 가능한 값 타입

〈'column-gap'〉

  • normal | <length-percentage>

사용되는 키워드

  • normal

    다중 열 컨테이너에서 사용된 값 1em을 나타내고 다른 모든 컨텍스트에서 사용된 값 0px를 나타낸다.

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • 〈column-gap〉normalCSS3

    컬럼(열)의 간격을 W3C에서 제안한 1em으로 처리한다.

구문

  • normal | 〈length-percentage〉CSS3
  • object.style.columnGap = "20px";CSS3

    자바스크립트 형식

테스트 도구

컬럼간의 경계 영역 크기 설정

지원 웹브라우저