Javascript Reference - HTML DOM Style columnGap Property

The columnGap property sets and gets the gap between the columns.

Browser Support


`columnGap`	Yes (WebkitColumnGap)	10	Yes (MozColumnGap)	Yes (WebkitColumnGap)	Yes

Syntax

Return the columnGap property:

var v = object.style.columnGap

Set the columnGap property:

object.style.columnGap="length|normal|initial|inherit'

Property Values

length: sets the gap length between the columns
normal: Default value. Specifies a normal gap between the columns.
initial: sets to default value
inherit: Inherits this property from its parent element

Technical Details

Default Value:	normal
Return Value:	A string representing the column-gap property
CSS Version	CSS3

Example

The following code shows how to specify a 40 pixels gap between the columns.


<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {<!--from w  w w.ja  v  a 2 s.c  o m-->
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>

<div id="myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum 
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore 
te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend 
option congue nihil imperdiet doming id quod mazim placerat facer possim 
assum. Typi non habent claritatem insitam; est usus legentis in iis qui 
facit eorum claritatem. Investigationes demonstraverunt lectores legere 
me lius quod ii legunt saepius.
</div>

<script>
function myFunction() {
    document.getElementById("myDIV").style.WebkitColumnGap = "50px"; /* Code for Chrome and Safari*/
    document.getElementById("myDIV").style.MozColumnGap = "50px"; /* Code for Firefox*/
    document.getElementById("myDIV").style.columnGap = "50px";
}
</script>

</body>
</html>

The code above is rendered as follows: