親パディングを子要素にしないようにする

Question

4面すべてに2％のパディングを持つ正方形の親コンテナがあります。私は底の上にこぼれる小さな四角形を持っています。親コンテナを基準にしてシェイプの高さを設定しています。私はoverflow:hiddenを使うことができますが、それは単に子要素を含んでいることを知っています。子は親のパディングを尊重しません。

.parent { 
 
    border-radius: 15px; 
 
    background: #cccac9; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    height: 30%; 
 
    width: 60%; 
 
    transform: translate(-50%, -50%); 
 
    padding: 2%; 
 
    overflow:hidden; 
 
} 
 
    
 
.child { 
 
    background: #1c1c1c; 
 
    position: relative; 
 
    height: 30%; 
 
    color: White; 
 
    text-align: center; 
 
    padding-top: 8px; 
 
}

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

灰色の背景には、底部にブラックボックスが、それは子供のいる親です。下の黒いボックスは、グレーの親コンテナのパディング上に出血しています。

Answer 1

あなたの子供を独自のコンテナに入れて、そのコンテナにoverflow: hiddenを設定することができます。私はまたその高さを100％に設定します。

.parent { 
 
    border-radius: 15px; 
 
    background: #cccac9; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    height: 30%; 
 
    width: 60%; 
 
    transform: translate(-50%, -50%); 
 
    padding: 2%; 
 
} 
 
.child-container { 
 
    overflow: hidden; 
 
    height: 100%; 
 
} 
 
.child { 
 
    background: #1c1c1c; 
 
    color: White; 
 
    text-align: center; 
 
    padding-top: 8px; 
 
}

<div class='parent'> 
 
    <div class='child-container'> 
 
    <div class="child"> 
 
     <p>This is my text</p> 
 
     <p>This is my text</p> 
 
     <p>This is my text</p> 
 
     <p>This is my text</p> 
 
     <p>This is my text</p> 
 
     <p>This is my text</p> 
 
     <p>This is my text</p> 
 
    </div> 
 
    </div> 
 
</div>