web-dev-qa-db-ja.com

マージン自動とはどういう意味ですか？

私は [〜＃〜] mdn [〜＃〜] をチェックして、マージンプロパティに自動値があることの意味を確認しました。「自動はに置き換えられています値、例えば、ブロックのセンタリングに使用できます。 "

しかし、それはその適切な値であり、何に適しているのでしょうか。

私はいくつかの実験を試してみましたが、margin-left：autoを追加すると、コンテナーは右に移動します（右に浮いているように）：

#container {
    background: red;
    width: 120px;
    margin-left: auto;
}

http://jsfiddle.net/sph2j6jx/

マージンオートの追加は、実際には「利用可能なすべてのスペースを取る」のようなものですか？そして、左と右の両方のマージンを追加すると、divが中央に配置されます。これは、すべてのスペースを左から右に取ろうとするためです。

htmlcssmargin
23
Alin Ciocan

自動マージン

状況に応じて、auto値を指定すると、独自のスタイルシートで提供されている値に従ってマージンをレンダリングするようにブラウザーに指示します。ただし、このようなマージンが意味のある幅の要素に適用されると、代わりに自動マージンにより、使用可能なすべてのスペースが空白としてレンダリングされます。

から w3.org

13
emmanuel

上記のプロパティの値は、要素のコンテンツまたはコンテキストに応じて自動的に調整されます。

たとえば、height: autoを含むブロックレベルの要素は、より多くのテキストが含まれているため、背が高くなります。別の例として、margin: 0 autoのあるブロック要素は、ビューポートのy軸に沿って中央に配置されるまで、左右のマージンが増加します。

これは、実際には、値を与えるプロパティに依存します。異なるプロパティの動作は、コンテンツとコンテキストによって異なります。

リファレンス- CSSプロパティの「auto」値の意味は何ですか。

8
ummahusla
#main {
  width: 600px;
  margin: 0 auto; 
}

<div id="main">ブロックレベルの要素の幅を設定すると、コンテナの端まで左右に引き伸ばされなくなります。次に、左右のマージンをautoに設定して、その要素をコンテナ内で水平方向に中央揃えにします。要素は指定した幅を占め、残りのスペースは2つのマージンの間で均等に分割されます。</div>

2
Deepak Biswal