CSS - 使子 div 具有与父 div 相同的填充答案

【问题标题】：CSS - Make child div have same padding as parent divCSS - 使子 div 具有与父 div 相同的填充
【发布时间】：2019-10-22 19:07:08
【问题描述】：

我使用以下格式：

body: margin x%
.parent: padding y%
    .child: some width, exact above padding

Body 的 margin 为 x%。在里面，有一个父 div 有一个 y% padding。还有一个孩子div，我试图让它与父级具有完全相同的padding。有什么不使用 javascript 的建议吗？

【问题讨论】：

一个简单的解决方案是创建一个具有您想要的填充的类，并将该类应用于父级和子级以及您希望将其应用于的任何其他区域。你是如何布置我们的 HTML 的，你能改变 HTML 和 CSS 吗？
你能用 vw 代替 % 吗？任何父元素和子元素的视口宽度始终相同。

标签： html css padding

【解决方案1】：

对子元素使用padding: inherit;。子元素将从父 div 获取填充。

【讨论】：

@darkchampionz 你确定它有效吗？它不适合我：jsfiddle.net/tzgq4xb9
@darkchampionz 检查此codepen.io/NehhaSharma/pen/NWWdLYW
@NehaSharma 试图提供帮助是件好事，但坚持使用错误信息则不然。
@NehaSharma 我am 提供帮助，指出您建议的解决方案实际上不是。你在这里更改了参数，使用了与问题开始时不同的单位。正如已经指出的那样，当我们在您的示例中将其更改为百分比时，它给出的值只是“接近”，而不是 exact 与问题所需的相同。

【解决方案2】：

您可以根据vw 单位来近似此值。填充考虑了要计算的父级的宽度，因此parent 元素的填充将是width of viewport - margin of the body = width of the body。我们可以考虑calc()来获取padding，然后给child使用。

这是一个示例，我在父级上考虑 10% 填充和 5% 边距。此方法的唯一缺点是计算中考虑的滚动条宽度，这就是为什么我将其称为近似值

.parent {
  padding:calc((100vw - 2*0.05*100vw)*0.1);
  border:1px solid;
}
.percentage {
  padding:10%;
}
.child {
  padding:calc((100vw - 2*0.05*100vw)*0.1);
  border:1px solid;
}

body {
  margin:5%;
}

<div class="parent percentage">
  <div class="child">
    some content here
  </div>
</div>
<div class="parent">
  <div class="child">
    some content here
  </div>
</div>

【讨论】：