子div - マージンが親の詰め物を無視していない

Question

私は内側のdivが外側のdivを埋めるようにしたいと思います。私は子供に負の詰め物を使用するように言われましたが、これは論理的に聞こえるが、私の場合は機能しません。これは私が親と子のdivで使用している遷移によるものだと思います。

私は、ホバーで透明から透明に移行する子供を持っています。私は子供の背景画像を親の背景画像から移行させる。私はdivの高さをカスタマイズすることができるように、親にパディングを追加したいと思いますが、私がそうすると、子は親を埋めることはありません。子供にマイナスのマージンを加えると効果はありません。

.outer{ 
 
    font-size: 2em; 
 
\t border: 2px solid #898080; 
 
\t margin-bottom: 40px; 
 
\t border-radius: 20px; 
 
\t text-shadow: 5px 5px 5px #000000; 
 
\t position: relative; 
 
\t display: inline-block; 
 
\t transition: all 1s ease-in-out; 
 
\t background-color: black; 
 
\t padding: 30px 0px 30px 0px; 
 
} 
 

 
/* Scale up the box */ 
 
.outer:hover { 
 
    color: white; 
 
    border: 2px solid #d8e6ee; 
 
    transform: scale(1.1, 1.1); 
 
    transition: background .5 ease; 
 
    opacity: 1; 
 
} 
 

 

 
#inner{ 
 
\t zoom: 1.0; 
 
\t border-radius: 17px; 
 
\t text-shadow: 5px 5px 5px #000000; 
 
\t background-color: red; 
 
\t opacity: 0; 
 
    -webkit-transition: opacity 1s linear; 
 
    -moz-transition: opacity 1s linear; 
 
    transition: opacity 1s linear; 
 
} 
 

 
#inner:hover{ 
 
\t opacity: 1; 
 
}

<div class="outer"> 
 
    <div id="inner">Hello World</div> 
 
</div>

Answer 1

[OK]を、あなたは要素のパディングの使用の谷がありますが、その要素の内容は、パディングを無視したいの寸法を設定しようとしているので。あなたがそれを置くとパディングが正しい道具ではないことが明らかになります。あなたがしなければならないことは、子供の大きさを設定することだけです。そして定義上、親が従います。

コードでは、paddingを.outerから#innerに移動します。