Properties

Properties

Draft
  • account_tree
  • bug_report

column-gapCSS3

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

설명

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

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

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

설정 가능한 속성 값

  • length길이단위허용CSS3
    • 사용 가능한 단위: px, %, em, cm, mm, vmin, vmax
  • normal기본값키워드CSS3

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

  • initial키워드CSS3

    CSS 기본 값으로 설정한다.

구문

  • column-gap length or norma or initial;기본형식CSS3

    숫자와 또는 상수를 이용해 컬럼(열)과 컬럼(열)의 간격을 조정한다.

  • object.style.columnGap = "20px";자바스크립트 형식CSS3

    자바스크립트 형식

테스트 도구

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

버전 명세

Version NameDescriptionFlags
CSS3

지원 웹브라우저