padding-top: 〇〇%の謎

こんにちは。
デザインシステム室のです。

今回はレスポンシブ対応のページなどを作成していて、比率を維持したまま要素の拡縮する際に使われたりする、あれ。
> padding-top: 〇〇%;
についてちょっと調べました。

なにそれ?

要素の縦横比率を維持したまま拡大縮小をしたいときに使われます。
(純粋に内側に余白を指定したい時にも使います。本来はこっちの用途)
使用する際には内側要素を絶対位置指定したりしますが、今回は割愛します。

この比率保持「padding-top」の存在は知っておりたびたび使用することもありましたが、なぜ上下の「%」指定で親の横幅を参照できるのかは謎のままでした。

MDN先生に聞きました

詳細な理由はわかりませんでしたが、paddingへ「%」を使用する場合は、ブロックの横幅を参照しているようです。
「position: absolute」と「margin: auto」を使用したセンタリングなども含めて一度調べてみたいですね。

Percentages: refer to logical width of containing block

https://www.w3.org/TR/css-box-3/#padding-physical

古事記にもそう書かれている。いいね?

現在デザインシステム室では、新しいメンバーを募集しています。
少しでも興味を持たれた方、ぜひご応募ください。
お待ちしております。

募集要項およびエントリーフォーム >