【问题标题】: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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-10-16
      • 2020-09-03
      • 1970-01-01
      • 2020-06-05
      • 1970-01-01
      • 2021-01-14
      • 2020-09-19
      • 1970-01-01
      相关资源
      最近更新 更多