CSS マージンの割合とpadding_html/css_WEB-ITnose

少し前に、私の同僚がマージンとパディングの適用パーセンテージの値についていくつかの誤解を持っていたようで、それは一般的な問題である可能性があると考えたので、それを個別に記述する必要があると感じました。

margin と padding は両方ともパーセンテージ値を使用できますが、通常の考え方と異なる点が 1 つあります。つまり、 margin-top |padding-bottom のパーセンテージ値は、コンテナですが、コンテナの高さまでです。

標準 (2.1) の元の式を引用します:

パーセンテージは、生成されたボックスの包含ブロックの幅に関して計算されます。これは、次のように 'margin-top' と 'margin-bottom' に当てはまります。含まれるブロックの幅がこの要素に依存する場合、結果のレイアウトは CSS 2.1 では定義されません

'padding-top' と 'padding の場合でも、パーセンテージは生成されたボックスの含まれるブロックの幅に対して計算されます。 -bottom' を含むブロックの幅がこの要素に依存する場合、結果のレイアウトは CSS 2.1 では定義されません

幅が幅を指すことは間違いありませんが、高さも幅を指します。結局のところ、高さの適用割合の基準は依然としてコンテナの高さであるため、考え方は異なります。

標準がこのように定義されている理由については、いくつかの一般的な説明があります (個人的に) 一緒に分析してみましょう。パディングとマージンは似ているため、以下では例としてパディングトップのみを使用します。

最初の理論は、padding-top がコンテナの高さに基づいている場合、子要素に適用されるパディング値によってコンテナの高さが増加し続け、コンテナの高さの変更も継続するというものです。子要素のpadding-topに影響を与えるため、無限ループにトラップされます。

これは、高さが可変のコンテナには当てはまりますが、高さが固定されたコンテナには当てはまりません。これは、高さのコンテナも決定された高さを持たなければならない理由です。つまり、padding-top でコンテナの高さを参照したい場合は、高さと同じ方法で処理する必要があります。

2 番目のステートメントは、パディング (マージン) の 4 つの値の統一性を維持するため、より信頼性があります。

パディング (マージン) の値にどのような測定が使用されても、4 つの値は常に一貫しています。パーセンテージについて特別なケースを作成することは可能ですか?最初の記事のマルチケース処理と組み合わせると、padding-top の標準定義がコンテナーの高さを指す場合、少なくとも 4 つ以上の例外がリストされることになるのではないかと思います。これは誰にとっても良いことではありません。 :)

実際、パディング参照ボディが幅であることを知っておくと便利です。ソリッド ピクセルの初期の設計ではパディングやマージンにパーセンテージ値が使用されることはほとんどありませんでしたが、モバイル対応レイアウトの必要性により、パーセンテージはますます希薄になり、一般的になりました。たとえば、background-sizing と連携して背景の比率を維持したり、メディア クエリと連携して対応する間隔を調整したりするなどです。これらのアプリケーションはすべて、

垂直方向でも水平方向でも、パーセント値は常に幅を参照するという 1 つの事実に基づいています。

実際、幅はアダプティブでモダンな Web デザインの魂です。