Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 27963 of column-gap

  • Revision slug: CSS/column-gap
  • Revision title: column-gap
  • Revision id: 27963
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 34 words added, 14 words removed

Revision Content

Summary

In Mozilla applications, -moz-column-gap sets the gap between columns for block elements which are specified to display as a multi-column element.

  • {{ Xref_cssinitial() }}: {{ Cssxref("normal") }}
  • Applies to: multi-column elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: n/a
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: specified value

-moz-column-gap was one of the proposals leading to the proposed CSS3 {{ Cssxref("column-gap") }} property.

Syntax

-moz-column-gap:  {{ Xref_csslength() }} | normal

Values

<length>
a non-negative value in any of the CSS length units to specify gap between columns.
normal
Default value, depends on the user agent. In desktop browsers like Firefox this is 1em. In Gecko 1.8.1 (Firefox 2.0) and before the default value was 0.

Examples

.content-box {
  border: 10px solid #000000;
  -moz-column-count: 3;
  -moz-column-gap: 20px;
}

Specifications

See also

{{ CSS_Reference:Columns() }}

Revision Source

<h3 name="Summary">Summary</h3>
<p>In Mozilla applications, <code>-moz-column-gap</code> sets the gap between columns for block elements which are specified to display as a multi-column element.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("normal") }}</li> <li>Applies to: multi-column elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: n/a</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: specified value</li>
</ul>
<p><code>-moz-column-gap</code> was one of the proposals leading to the proposed <a href="/en/CSS3_Columns" title="en/CSS3_Columns">CSS3</a> {{ Cssxref("column-gap") }} property.</p>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">-moz-column-gap:  {{ Xref_csslength() }} | normal
</pre>
<h3 name="Values">Values</h3>
<dl><dt>&lt;length&gt; </dt><dd>a non-negative value in any of the CSS length units to specify gap between columns.</dd><dt>normal<br>
</dt><dd>Default value, depends on the user agent. In desktop browsers like Firefox this is<code> 1em</code>. In Gecko 1.8.1 (Firefox 2.0) and before the default value was<code> 0</code>.<br>
</dd></dl>
<h3 name="Examples">Examples</h3>
<pre>.content-box {
  border: 10px solid #000000;
  -moz-column-count: 3;
  -moz-column-gap: 20px;
}
</pre>
<h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-multicol/#lsquo2">css3-multicol</a></li>
</ul>
<h3 name="See_also">See also</h3>
<p>{{ CSS_Reference:Columns() }}</p>
Revert to this revision