path: root/files/zh-cn/web/css/margin-bottom/index.html

---
title: margin-bottom
slug: Web/CSS/margin-bottom
tags:
  - CSS
  - CSS属性
  - 参考
translation_of: Web/CSS/margin-bottom
---
<div>{{CSSRef}}</div>

<h2 id="Summary" name="Summary">Summary</h2>

<p><img alt="The effect of the CSS margin-bottom property on the element box" src="https://mdn.mozillademos.org/files/12980/margin-bottom%20explained.svg" style="border: 1px solid; float: left; height: 252px; margin-bottom: 1em; margin-right: 1em; padding-right: 0.5em; width: 368px;"></p>

<p><span class="seoSummary">CSS的<code> margin-bottom 属性用于设置元素的底部外边距，允许设置负数值。一个正数值将让它相对于正常流与邻近块更远，而负数值将使得更近。</code></span></p>

<p><span class="seoSummary">该属性对于<em>不可替代(non-replaced 元素在规范中有概念，请自行搜索)</em>的行级元素没有效果，比如： {{HTMLElement("tt")}} 或者 {{HTMLElement("span")}}.</span></p>

<p>{{cssinfo}}</p>

<h2 id="Syntax" name="Syntax">语法</h2>

<pre class="brush:css">/* &lt;length&gt; values */
margin-bottom: 10px;        /* 一个绝对的长度值 */
margin-bottom: 1em;         /* A length relative to the text size */
margin-bottom: 5%;          /* A margin relative to the nearest block container's width */

/* Keyword values */
margin-bottom: auto;

/* Global values */
margin-bottom: inherit;
margin-bottom: initial;
margin-bottom: unset;
</pre>

<h3 id="Values" name="Values">值</h3>

<dl>
 <dt><code>&lt;length&gt;</code></dt>
 <dd>定义了一个确定的宽度值，参见 {{cssxref("&lt;length&gt;")}} 以了解更多可能的值。</dd>
 <dt><code>&lt;percentage&gt;</code></dt>
 <dd>{{cssxref("&lt;percentage&gt;")}} 始终与包含该元素的<strong>容器宽度</strong>有关。</dd>
 <dt><code>auto</code></dt>
 <dd>由浏览器自己选择一个合适的值。参见 {{cssxref("margin")}}。</dd>
</dl>

<h3 id="正式语法">正式语法</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Example" name="Example">样例</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div class="container"&gt;
&lt;div class="box0"&gt;Box 0&lt;/div&gt;
&lt;div class="box1"&gt;Box 1&lt;/div&gt;
&lt;div class="box2"&gt;Box one's negative margin pulls me up&lt;/div&gt;
&lt;/div&gt;</pre>

<h3 id="CSS">CSS</h3>

<p>用于设置<code> div </code>的<code> margin-bottom </code>和<code> height </code>的 CSS代码</p>

<pre class="brush: css">.box0 {
    margin-bottom:1em;
    height:3em;
}
.box1 {
    margin-bottom:-1.5em;
    height:4em;
}
.box2 {
    border:1px dashed black;
    border-width:1px 0;
    margin-bottom:2em;
}

</pre>

<p>为了使<code> margin </code>产生的影响更明显，添加了一些<code> container </code>和<code> div </code>的样式定义</p>

<pre class="brush: css">.container {
    background-color:orange;
    width:320px;
    border:1px solid black;
}
div {
    width:320px;
    background-color:gold;
}</pre>

<p>{{ EmbedLiveSample('Example',350,200) }}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">注释</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Box', '#margin-bottom', 'margin-bottom')}}</td>
   <td>{{Spec2('CSS3 Box')}}</td>
   <td>无明显变化</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>将 <code>margin-bottom</code> 定义为可动画化</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>移除了对内联元素的影响</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>初始定义</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1")}}</td>
   <td>3.0</td>
   <td>3.5</td>
   <td>1.0 (85)</td>
  </tr>
  <tr>
   <td><code>auto</code> value</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1")}}</td>
   <td>6.0 (strict mode)</td>
   <td>3.5</td>
   <td>1.0 (85)</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoMobile("1")}}</td>
   <td>6.0</td>
   <td>6.0</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>