CSS: さまざまな要素のマージンの計算_html/css_WEB-ITnose

要素の分類については、私の記事 CSS: 要素の高さと幅に関するディスカッション シリーズ (2) を参照してください。

インライン レベルの要素

• インラインの非置換要素: マージン値の場合が auto の場合、margin-left と margin-right の計算値は 0 になります

• Inline、置換要素: 同上

• Inline-block、ドキュメントフロー内の置換要素: 同上

• ドキュメントフロー内のインラインブロック、非置換要素: 上記と同じ

ブロックレベルの要素

ドキュメントフロー内のブロックレベルの非置換要素

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

次の場合、 margin の値が auto

• width が auto の値の場合、他の値が auto の場合、値は 0 になります

• margin-left と margin-right の値が auto と使用される値が等しい場合、それらは含まれているブロックに対して水平方向の中央に配置されます。

ドキュメント フロー内のブロック レベルの置換要素

は、ブロック レベルの非置換要素と同じです。

概要

1. インラインレベルの置換要素および非置換要素について、マージン値が auto の場合、margin-left と margin-auto の計算値は両方とも 0 になります。

2. ブロックレベルの置換要素と非置換要素:

   'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block 

   • width が auto 値の場合、他の値は auto で、値は 0 です

   • If margin-left と margin-right の auto の場合、使用される値が等しい場合、値は含まれているブロックに対して水平方向に中央揃えになります。