margin-bottom

  • Adressname der Version: Web/CSS/margin-bottom
  • Titel der Version: margin-bottom
  • ID der Version: 498903
  • Erstellt:
  • Autor: fscholz
  • Aktuelle Version? Ja
  • Kommentar Moved From CSS/margin-bottom to Web/CSS/margin-bottom

Inhalt der Version

{{ CSSRef() }}

Übersicht

Die margin-bottom Eigenschaft legt den unteren Außenabstand eines Elements fest. Negative Werte sind erlaubt.

  • Standardwert: 0
  • Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit display table, table-caption und inline-table
  • Vererbbar: Nein
  • Prozentwerte: beziehen sich immer auf die Breite des umschließenden Blocks.
  • Medium: visuell
  • berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.

Syntax

margin-bottom: <Längenangabe> | <Prozentzahl> | auto | inherit

Werte

<Längenangabe>
Legt eine bestimmte Länge fest. Negative Werte sind erlaubt.
<Prozentzahl>
Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte sind erlaubt.
auto
auto wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.
inherit
Der Wert des Elternelements wird geerbt.

Beispiele

.content { margin-bottom: 5%; }
.sidebox { margin-bottom: 10px; }
.logo    { margin-bottom: -5px; }

Browser Kompatibilität

Browser ab Version auto Wert
Internet Explorer 3.0 6.0 (strict mode)
Firefox (Gecko) 1.0 (1.0) 1.0 (1.0)
Opera 3.5 3.5
Safari (WebKit) 1.0 (85) 1.0 (85)

Spezifikation

Siehe auch

{{ languages( { "en": "en/CSS/margin-bottom", "ja": "ja/CSS/margin-bottom" } ) }}

Quelltext der Version

<p>{{ CSSRef() }}</p>
<h2 id=".C3.9Cbersicht.3A">Übersicht</h2>
<p>Die <code>margin-bottom</code> Eigenschaft legt den unteren Außenabstand eines Elements fest. Negative Werte sind erlaubt.</p>
<ul>
 <li>Standardwert: <code>0</code></li>
 <li>Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit <a href="/de/CSS/display" title="de/CSS/display">display</a> <code>table</code>, <code>table-caption</code> und <code>inline-table</code></li>
 <li>Vererbbar: Nein</li>
 <li>Prozentwerte: beziehen sich immer auf die <a href="/de/CSS/width" title="de/CSS/width">Breite</a> des umschließenden Blocks.</li>
 <li>Medium: visuell</li>
 <li>berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.</li>
</ul>
<h2>Syntax</h2>
<pre class="eval">
margin-bottom: &lt;Längenangabe&gt; | &lt;Prozentzahl&gt; | auto | inherit
</pre>
<h3 id="Werte">Werte</h3>
<dl>
 <dt>
  &lt;Längenangabe&gt;</dt>
 <dd>
  Legt eine bestimmte <a href="/de/CSS/Einheiten#L.c3.a4ngen" title="de/CSS/Einheiten#L.c3.a4ngen">Länge</a> fest. Negative Werte sind erlaubt.</dd>
 <dt>
  &lt;Prozentzahl&gt;</dt>
 <dd>
  Ein <a href="/de/CSS/Einheiten#Prozent" title="de/CSS/Einheiten#Prozent">prozentualer</a> Wert, der sich auf die Breite des umschließenden Blocks (<em>containing block</em>) bezieht. Negative Werte sind erlaubt.</dd>
 <dt>
  auto</dt>
 <dd>
  <code>auto</code> wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.</dd>
 <dt>
  inherit</dt>
 <dd>
  Der Wert des Elternelements wird geerbt.</dd>
</dl>
<h2>Beispiele</h2>
<pre>
.content { margin-bottom: 5%; }
.sidebox { margin-bottom: 10px; }
.logo    { margin-bottom: -5px; }
</pre>
<h2>Browser <span>Kompatibilität</span></h2>
<table class="standard-table">
 <tbody>
  <tr>
   <th>Browser</th>
   <th>ab Version</th>
   <th><code>auto</code> Wert</th>
  </tr>
  <tr>
   <td>Internet Explorer</td>
   <td>3.0</td>
   <td>6.0 (strict mode)</td>
  </tr>
  <tr>
   <td>Firefox (Gecko)</td>
   <td>1.0 (1.0)</td>
   <td>1.0 (1.0)</td>
  </tr>
  <tr>
   <td>Opera</td>
   <td>3.5</td>
   <td>3.5</td>
  </tr>
  <tr>
   <td>Safari (WebKit)</td>
   <td>1.0 (85)</td>
   <td>1.0 (85)</td>
  </tr>
 </tbody>
</table>
<h2>Spezifikation</h2>
<ul>
 <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" lang="en">CSS 2.1 Visual formatting #margin</a></li>
</ul>
<h2>Siehe auch</h2>
<ul>
 <li><a href="/de/CSS/margin" title="de/CSS/margin"><code>margin</code></a>, <a href="/de/CSS/margin-right" title="de/CSS/margin-right"><code>margin-right</code></a>, <a href="/de/CSS/margin-top" title="de/CSS/margin-top"><code>margin-top</code></a>, <a href="/de/CSS/margin-left" title="de/CSS/margin-left"><code>margin-left</code></a></li>
 <li><a href="/de/CSS/-moz-margin-start" title="de/CSS/-moz-margin-start"><code>-moz-margin-start</code></a>, <a href="/de/CSS/-moz-margin-end" title="de/CSS/-moz-margin-end"><code>-moz-margin-end</code></a></li>
 <li><a href="/de/CSS/padding" title="de/CSS/padding"><code>padding</code></a></li>
</ul>
<p>{{ languages( { "en": "en/CSS/margin-bottom", "ja": "ja/CSS/margin-bottom" } ) }}</p>
Zu dieser Version zurücksetzen