すべてのパディングを追加すると内部divを完全に置き換えます

Question

私の内側のコンテンツを外側のコンテンツに配置する際に問題があります。埋め込みを追加すると、内側のコンテンツの配置が完全に解除されるようです。

はここではありませんパディングでどのように見えるかです： before padding

そして、ここではそれだけで1pxのパディングトップのとどのように見えるかです： after padding

クローム検査から、私はそれが正しくパディングをやって見たが私はそれが上部にとどまると期待したときに、外側のdivの下部の近くにコンテンツを再配置します。ここで

は私のCSSです：なぜこれが起こっている

.outer-content { 
 
\t margin-top: 20px; 
 
\t background-color: pink; 
 
\t padding-top: 20px; 
 
\t width: 75%; 
 
\t height: 40px; 
 
} 
 

 
.inner-content { 
 
\t background-color: lightblue; 
 
\t width: 75%; 
 
\t height: 20px; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t text-align: center; 
 
}

<div class="outer-content"> 
 
    <div class="inner-content"> 
 
     <p>Here is some content</p> 
 
    </div> 
 
</div>

誰でも知っていますか？

EDIT：テキストの周りのpタグを削除すると修正されています。しかし、私はまだあなたがpタグを持っているときにそのように振る舞うのかどうかは分かりません。

Answer 1

例にいくつかのHTMLを追加するとうまくいきました。私はしかし、外側のコンテンツのCSSを変更します。高さを取り除き、パディングを追加するだけです。

.outer-content { 
 
    margin-top: 20px; 
 
    background-color: pink; 
 
    padding: 20px; 
 
    width: 75%; 
 
} 
 
.inner-content { 
 
    background-color: lightblue; 
 
    width: 75%; 
 
    height: 20px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
}

<div class="outer-content"> 
 
    <div class="inner-content">Hello World</div> 
 
</div>