パディングトップ：100％はどのように機能しますか？

Question

は、私は、次のコードを持っている：

と子が完璧な四角になり、何らかの理由で

.parent { 
 
     width: 30%; 
 
     border: 1px dotted red; 
 
    } 
 

 
    .child { 
 
     padding-top: 100%; 
 
     border: 1px solid black; 
 
    }

<div class="parent"> 
 
     <div class="child"></div> 
 
    </div>

。 divのいずれにも割り当てられていない高さがないため、これは少なくとも変です。なぜこうなった？

padding-top: 100%は何をしますか？

Fiddle

Answer 1

あなたの子供のdivが100％の幅で親を満たしています。パーセンテージでのパディングトッププロパティはdivの幅で決まります。したがって、あなたの子供は親（30％）の100％幅を取得しており、パディングトップ100％はその要素の100％幅を意味します。同じことが幅によって計算されるマージントップにも当てはまります。