mozilla

Revision 297173 of margin-left

  • Revision slug: CSS/margin-left
  • Revision title: margin-left
  • Revision id: 297173
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment

Revision Content

{{CSSRef()}}
{{英語版章題('Summary')}}

概要

margin-left プロパティは、要素の左に必要な余白を設定します。負の値も指定可能です。

  • {{Xref_cssinitial()}}: 0
  • 適用対象: テーブル系要素を除く全ての要素。ただし、table-captiontableinline-table には適用可能。
  • {{Xref_cssinherited()}}: しない
  • 相対値の基準: 最も近いブロックレベルの先祖の {{Cssxref("width")}} を参照する。
  • メディア: {{Xref_cssvisual()}}
  • {{Xref_csscomputed()}}: 指定された割合または絶対値のな長さ
{{英語版章題('Syntax')}}

構文

margin-left: <length> | <percentage> | inherit | auto;
{{英語版章題('Values')}}

<length>
固定幅を指定します。使用可能な値は {{xref_csslength()}} を参照してください。
<percentage>
{{xref_csspercentage()}} は常に包含ブロックのを基準にします。
auto
{{cssxref("margin")}} を参照してください。
{{英語版章題('Examples')}}

サンプル

.content { margin-left:   5%; }
.sidebox { margin-left: 10px; }
.logo    { margin-left: -5px; }
{{英語版章題('Specifications')}}

仕様

仕様書 策定状況 コメント
{{SpecName('CSS3 Box', '#the-margin', 'margin-left')}} {{Spec2('CSS3 Box')}} 有意な変更点は無し
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-left')}} {{Spec2('CSS3 Transitions')}} margin-left がアニメーション可能プロパティと定義された
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}} {{Spec2('CSS2.1')}} インライン要素への効果が削除された
{{SpecName('CSS1', '#margin-left', 'margin-left')}} {{Spec2('CSS1')}} 最初期の仕様

ブラウザ毎の互換性

{{CompatibilityTable()}}

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 {{CompatGeckoDesktop("1")}} 3.0 3.5 1.0 (85)
auto 1.0 {{CompatGeckoDesktop("1")}} 6.0 (strict mode) 3.5 1.0 (85)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 1.0 {{CompatGeckoMobile("1")}} 6.0 6.0 1.0
{{英語版章題('See also')}}

参照

  • {{CSS_Reference:Margin()}}

Revision Source

<div>{{CSSRef()}}</div>




<div>{{英語版章題('Summary')}}</div>
<h2 id="Summary" name="Summary">概要</h2>
<p><code>margin-left</code> プロパティは、要素の左に必要な余白を設定します。負の値も指定可能です。</p>
<ul class="cssprop">
  <li><dfn>{{Xref_cssinitial()}}</dfn>: 0</li>
  <li><dfn>適用対象</dfn>: テーブル系要素を除く全ての要素。ただし、<code>table-caption</code>、<code>table</code>、<code>inline-table</code> には適用可能。</li>
  <li><dfn>{{Xref_cssinherited()}}</dfn>: しない</li>
  <li><dfn>相対値の基準</dfn>: 最も近いブロックレベルの先祖の {{Cssxref("width")}} を参照する。</li>
  <li><dfn>メディア</dfn>: {{Xref_cssvisual()}}</li>
  <li><dfn>{{Xref_csscomputed()}}</dfn>: 指定された割合または絶対値のな長さ</li>
</ul>



<div>{{英語版章題('Syntax')}}</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="eval">
margin-left: &lt;length&gt; | &lt;percentage&gt; | inherit | auto;
</pre>




<div>{{英語版章題('Values')}}</div>
<h3 id="Values" name="Values">値</h3>
<dl>
  <dt>
    &lt;length&gt;</dt>
  <dd>
    固定幅を指定します。使用可能な値は {{xref_csslength()}} を参照してください。</dd>
  <dt>
    &lt;percentage&gt;</dt>
  <dd>
    {{xref_csspercentage()}} は常に包含ブロックの<strong>幅</strong>を基準にします。</dd>
  <dt>
    auto</dt>
  <dd>
    {{cssxref("margin")}} を参照してください。</dd>
</dl>



<div>{{英語版章題('Examples')}}</div>
<h2 id="Examples" name="Examples">サンプル</h2>
<pre class="brush:css">
.content { margin-left:   5%; }
.sidebox { margin-left: 10px; }
.logo    { margin-left: -5px; }
</pre>



<div>{{英語版章題('Specifications')}}</div>
<h2 id="Specifications" name="Specifications">仕様</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', '#the-margin', 'margin-left')}}</td>
      <td>{{Spec2('CSS3 Box')}}</td>
      <td>有意な変更点は無し</td>
    </tr>
    <tr>
      <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-left')}}</td>
      <td>{{Spec2('CSS3 Transitions')}}</td>
      <td><code>margin-left</code> がアニメーション可能プロパティと定義された</td>
    </tr>
    <tr>
      <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}}</td>
      <td>{{Spec2('CSS2.1')}}</td>
      <td>インライン要素への効果が削除された</td>
    </tr>
    <tr>
      <td>{{SpecName('CSS1', '#margin-left', 'margin-left')}}</td>
      <td>{{Spec2('CSS1')}}</td>
      <td>最初期の仕様</td>
    </tr>
  </tbody>
</table>



<h2 id=".E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.81.AE.E4.BA.92.E6.8F.9B.E6.80.A7">ブラウザ毎の互換性</h2>
<p>{{CompatibilityTable()}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>基本サポート</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> 値</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>機能</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>基本サポート</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>



<div>{{英語版章題('See also')}}</div>
<h2 id=".E9.96.A2.E9.80.A3.E9.A0.85.E7.9B.AE">参照</h2>
<ul>
<li>{{CSS_Reference:Margin()}}</li>
</ul>
Revert to this revision