In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > compact (dir, dl, menu, ol, ul)

compact property (dir, dl, menu, ol, ul)

Browser support:

Sets or retrieves whether extra space between list items should be removed.

In Internet Explorer, this functionality is only implemented for the definition list element. In other commonly used browsers the compact property doesn't work properly for all elements. This property is deprecated in HTML 4.01, but there is no other way to remove extra spaces between definition list elements.

Syntax:

object.compact;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: COMPACT

Possible values:

Boolean that indicates whether space should be removed.

One of the following values:

false

Default. Leaves extra spaces between list items.

true

Removes extra spaces between list items.

Default: false.

Example HTML code 1:

This example illustrates the use of the COMPACT attribute in Internet Explorer:

<b>List, with compact:</b>
<dl compact="compact">
    <dt>Apple</dt>
    <dd>Apple is one of the most widely cultivated tree fruits.</dd>
    <dt>Pear</dt>
    <dd>Pears are trees of the genus Pyrus and the fruit of that tree, edible in some species.</dd>
</dl>

<br />

<b>List, without compact:</b>
<dl>
    <dt>Apple</dt>
    <dd>Apple is one of the most widely cultivated tree fruits.</dd>
    <dt>Pear</dt>
    <dd>Pears are trees of the genus Pyrus and the fruit of that tree, edible in some species.</dd>
</dl>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the compact property:

<head>
    <script type="text/javascript">
        function ToggleCompactState (elem) {
            var list = document.getElementById ("myList");

            list.compact = !list.compact;
            elem.innerHTML = "Compact state = " + list.compact;

            // To solve refresh problems
            var nextElem = list.nextSibling;
            var paren = list.parentNode;
            paren.removeChild (list);
            paren.insertBefore (list, nextElem);
        }
    </script>
</head>
<body>
    <dl id="myList" compact="compact">
        <dt>Apple</dt>
        <dd>Apple is one of the most widely cultivated tree fruits.</dd>
        <dt>Pear</dt>
        <dd>Pears are trees of the genus Pyrus and the fruit of that tree, edible in some species.</dd>
    </dl>

    <button onclick="ToggleCompactState (this);">Change compact state!</button>
</body>