HTML - DOM Style Object columnGap Property

Quiz

HTML DOM Style Object columnGap property is used to specify the gap between the columns.

Syntax

Set the columnGap property:

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

Get the columnGap property:

object.style.columnGap;

Property Values

Value	Description
length	It sets the gap in length units.
normal	It is the default value specifying a gap of 1em between columns for multi column layout.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents column gap property of an element.

Example of HTML DOM Style Object 'columnGap' Property

The following example sets the column gap to 45px.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object columnGap Property
    </title>
    <style>
        #gap {
            column-count: 3;
        }
    </style>
</head>
<body>
    <p>Click to change the gap distance.</p>
    <button onclick="fun()">Change</button>
    <p id="gap">
        CSS is the acronym for "Cascading Style Sheet".
        It's a style sheet language used for describing
        the presentation of a document written in a markup
        language like HTML. CSS helps the web developers to
        control the layout and other visual aspects of the
        web pages. CSS plays a crucial role in modern web
        development by providing the tools necessary to create
        visually appealing, accessible, and responsive websites.
    </p>
    <script>
        function fun() {
            document.getElementById("gap")
                .style.columnGap = "45px";
        }
    </script>
</body>
</html>

Supported Browsers

Property
columnGap	Yes 1	Yes 12	Yes 1.5	Yes 3	Yes 11.1

html_dom.htm

Print Page