21

次に例を示します。

http://jsfiddle.net/QZAd8/1/

すべての赤い div が同じであり、heightを持っていることに注意してください。ただしpadding-top:100%;、A と B のパディング サイズは異なります...そして、親の幅がこの値を変更しているように見えます (Cheightは親の を変更しますが、そうではないことに注意してください)。パディングを変更しないでください)。

パディングがこのように幅に関連するのはなぜですか?

編集: 歴史的な理由から、また jsfiddle がなくなった場合に備えて、私の例で使用したコードは次のとおりです...

.outer {
  background-color: green;
  height: 300px;
  width: 70px;
  float: left;
  margin-right: 10px;
}

.middle {
  background-color: red;
  height: 100px;
  width: 50px;
  padding-top: 100%;
}

.inner {
  background-color: blue;
  height: 3px;
  width: 100%;
}
<div class='outer'>
  <div class='middle'>
    A
    <div class='inner'>
    </div>
  </div>
</div>

<div class='outer' style='width:100px'>
  <div class='middle'>
    B
    <div class='inner'>
    </div>
  </div>
</div>

<div class='outer' style='height:400px'>
  <div class='middle'>
    C
    <div class='inner'>
    </div>
  </div>
</div>

4

5 に答える 5

41

CSS流動レイアウトから：コンテナの幅が大きくなると、パーセンテージに基づくマージントップが大きくなります：

CSS では、margin: と padding: の 4 つのパーセンテージはすべて、幅に対して相対的です ...無意味に思えるかもしれませんが。それが CSS 仕様のやり方であり、それに対してできることは何もありません。

馬の口からまっすぐ：

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
Value:      <padding-width> | inherit
Initial:    0
Applies to:     all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited:      no
Percentages:    refer to width of containing block
Media:      visual
Computed value:     the percentage as specified or the absolute length

パーセンテージ: 包含ブロックの幅を参照

于 2013-07-12T18:06:57.500 に答える
1

パディングのパーセンテージが幅に対して相対的であることは事実ですが、具体的には、padding: 100%として読み取ることもできますpadding: *width-of-container*px。

AブロックとCブロックの幅は70px. 申し込み方法padding: 100%は同じでしたpadding: 70px

于 2013-07-12T18:16:58.737 に答える