auto_html/css_WEB-ITnose の使用

html

1 <div class="container">2     <div class="demo">  3     </div>4 </div>  

css

 1 .container{ 2       width:150px; 3       height:50px; 4       background:rgb(236,100,143); 5 } 6 .demo{ 7       background:rgb(141,163,210); 8       width:auto; 9       height:50px;10       margin-left:10px;11       margin-right:10px;12 }

1.margin-leftとwidthは固定値、margin-right:auto

今回はautoと書くマージンの-状態の右側は 150-50-10=90px です。

2. margin-left と margin-right は固定値 10px、width: auto

このとき auto 状態で書き込まれる width の実際の値は 150-10-10=130px です。

3.width は 100px の固定値、margin-left と margin-right は両方とも auto

このとき、.demo は中央に配置され、margin-left と margin-right の値は書き込みオート状態はどちらも(150 -100)/2=25pxです。

4.margin-left は 10px の固定値、width と margin-right は両方とも auto

このとき、auto に設定されている外側のマージンは 0 に削減されます (margin-right: 0)、幅の値は 150-10=140px です。

5.margin-left、margin-right、width はすべて auto に設定されます

このとき、両方の margin は 0 に設定され、width の値は 150-0-0=150px になります。

説明

margin-left、margin-right、width がすべて設定されており、その合計が親要素の幅よりも大きい (過度に制限されている) 場合、margin-right は次のようにリセットされます。幅の要件を満たします（左から右に読む言語の場合、そうでない場合はマージン左をリセットします）。

1. パディングと境界線を自動に設定したり、負の数値を設定したりすることはできません。
2. 通常のフローでは、 margin-top または margin-bottom を auto に設定すると、自動的に 0 として計算され、垂直方向のセンタリングが実現できません。
3. margin:0 auto の水平方向の中央揃え効果は、インライン要素 (p、img) には適用されません。margin を使用する必要がある場合は、text-align:center を使用して、最初に display:block を使用する必要があります。ブロックの形状要素に変換します。

参考資料

「CSS 決定版ガイド」第 7 章 基本的な視覚的書式設定