CSS Property: column-gap
[this page | pdf | back links]
The CSS (CSS3) column-gap property specifies what gap
is placed between columns of an element. Any column rule
between columns will appear in the middle of the gap.
Valid property values
(other than inherit
and initial) are:
|
Value
|
Description
|
|
length
|
A CSS length
|
|
normal
|
(default value).
Specifies normal gap between columns (W3C suggests 1em)
|
|
Default Value:
|
normal
|
|
JavaScript syntax:
|
e.g. object.style.columnGap="20px"
|
|
Inherited:
|
No
|
|
Animatable:
|
Yes
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
p {width: 200px; column-count: 2;}
p.x1 {column-gap: 100px;}
</style>
</head>
<body>
1. Element with default property<br>
<p>Some text that may be broken into several columns</p><br><br>
2. Element set using in-file HTML style
<p class="x1">Some text that may be broken into several columns</p><br><br>
3. Element set using JavaScript
<p id="x2">Some text that may be broken into several columns</p>
<script>
document.getElementById("x2").style.columnGap = "100px";
</script>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyColumnGap() {
var x = document.createElement("DIV"); x.style.columnGap = "100px"; return (window.getComputedStyle(x, null).columnGap == "100px");
} |
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties