html - 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/

它不一样，但应该适合您的情况。