column-gap

  • Revision slug: CSS/column-gap
  • Revision title: column-gap
  • Revision id: 27966
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment clean up; 6 words added, 21 words removed

Revision Content

{{ CSSMozExtensionRef() }}

Summary

In Mozilla applications like Firefox, the -moz-column-gap CSS property 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:  <length> | normal

Values

{{ xref_csslength() }}
The size of the 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

Browser compatibility

Browser Lowest Version Support of
Internet Explorer --- ---
Firefox (Gecko) 1.5 (1.8) -moz-column-gap
Opera --- ---
Safari (Webkit) 3.0 (522) -webkit-column-gap

See also

{{ CSS_Reference:Columns() }}

{{ languages( { "ja": "ja/CSS/-moz-column-gap" } ) }}

Revision Source

<p>{{ CSSMozExtensionRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>In Mozilla applications like Firefox, the <code>-moz-column-gap</code> CSS property 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/CSS/CSS3_Columns" title="en/CSS3_Columns">CSS3</a> {{ Cssxref("column-gap") }} property.</p>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">-moz-column-gap:  &lt;length&gt; | normal
</pre>
<h3 name="Values">Values</h3>
<dl> <dt>{{ xref_csslength() }}</dt> <dd>The size of the gap between columns.</dd> <dt><code>normal</code></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>.</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/#column-gap" title="http://www.w3.org/TR/css3-multicol/#column-gap">CSS 3 Multi-column layout #column-gap</a></li>
</ul>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> <th>Support of</th> </tr> <tr> <td>Internet Explorer</td> <td><strong>---</strong></td> <td><code>---</code></td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>1.5</strong> (1.8)</td> <td><code>-moz-column-gap</code></td> </tr> <tr> <td>Opera</td> <td><strong>---</strong></td> <td><code>---</code></td> </tr> <tr> <td>Safari (Webkit)</td> <td><strong>3.0</strong> (522)</td> <td><code>-webkit-column-gap</code></td> </tr> </tbody>
</table>
<h3 name="See_also">See also</h3>
<p>{{ CSS_Reference:Columns() }}</p>
<div class="noinclude">
<p>{{ languages( { "ja": "ja/CSS/-moz-column-gap" } ) }}</p>
</div>
Revert to this revision