CSS の疑問です

padding-top: calc(10 / 1000 * 100%);

上記を div タグに付けたとすると、
1000px の画面幅時 top に 10px パディングが付きます。
500px の画面幅時 top に 5px パディングが付きます。

どういう理屈なのでしょうか ?

わかる方、教えてください。

よろしくお願いします。

No.1 ベストアンサー 回答者： gekikaraou 回答日時： 2023/02/15 18:57

CSSも進歩してるんですね、最近見てなかったので面白いですね。

10 / 1000は、ブロックの幅の1%を計算し、ブロックの高さの100%を掛けたものである。つまり、calc(10 / 1000 * 100%) の値は、包含するブロックの高さの1%に相当する。

つまり、padding-top: calc(10 / 1000 * 100%) は、要素の上部に、内包するブロックの高さの 1 % に相当するパディングを追加することになります。これは、要素のコンテナの高さに応じてパディングの量が自動的に調整されるような、レスポンシブなレイアウトを作成するのに便利でしょう。

この回答へのお礼

回答ありがとうございます。

お礼日時：2023/02/15 21:42