为什么宽度为 100px 且 padding-bottom=100% 而不是 100px 的 div 的 padding-bottom [重复]答案

【问题标题】：Why is padding-bottom for a div with width=100px and padding-bottom=100% not 100px [duplicate]为什么宽度为 100px 且 padding-bottom=100% 而不是 100px 的 div 的 padding-bottom [重复]
【发布时间】：2019-11-23 11:38:52
【问题描述】：

根据https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom 100% padding-bottom 值应该与宽度为 100px 时设置为 100px 相同。

但是，用作width的值并不是设置给div的宽度（100px）而是div的容器的宽度，这里就是body。为什么会这样？

当 div 的显示切换到 table-cell 时，padding 变为 100px，因为设置为 div 的宽度是认真的。否则，该 div 将被视为横跨整个主体，就好像它没有设置宽度一样。

<div>hoho</div>

div {
    width: 100px;
    padding-bottom: 100%;
    background: lightcoral;
}

https://jsfiddle.net/citykid/zx5uptwy/4/

【问题讨论】：

标签： css padding

【解决方案1】：

From MDN:

内边距的大小，以百分比表示，相对于包含块的宽度

强调我的。

这意味着这就是你要找的东西：

.wrapper {
  width: 100px;
}

.content {
  padding-bottom: 100%;
  background: lightcoral;
}

<div class="wrapper">
  <div class="content">hoho</div>
</div>

【讨论】：