CSSで数字でパッドを増やす

Question

オブジェクトのパディングを数字で増やす方法があるかどうかを知りたいだけでした。例

#mydiv{ 
    padding: 50px; /*padding of one div*/ 
} 

div { 
    padding: +50px; /*basically increase the padding of all divs by 50*/ 
} 

のためにそう#mydiv上の結果のパディングが100%になるはずです。

calc()有用でしょうか？

私は他のJavaScriptの選択肢があることを知っていますが、可能であれば、単純なCSSでのみ行いたいと思います。

Answer 1

あなたは別の要素/クラス/ ...のパディングを取得し、いくつかの値を追加するようなやり方ではできません。しかし、あなたが行うことができ、変数を宣言すると、このいずれかを使用している：それは同じではありませんが、あなたのケースのために正常に動作する必要があります

:root { 
    --base-padding: 50px; 
} 

div{ 
    padding: calc(var(--base-padding) + 50px); 
    height: 50px; 
    width: 50px; 
    background-color: red; 
} 

#mydiv{ 
    padding: var(--base-padding); 
    background-color: green; 
} 

https://jsfiddle.net/268zzwqc/1/

を。