0

私はこの CSS に取り組んでいました。記事を div 内にラップしました。両方にパーセンテージ幅を指定し、div にパディングを指定しました。記事に境界線を追加するまで、パディングは「適用されていない」ように見えます。記事に適用された境界線にコメントを付けることで、違いを確認できます。私の記事の高さは縮小します。なぜこうなった？

<style>
body{
    margin:100px;
}
.content{
width:100%;   
padding:.9746589%;
background:green;
   }
  .content>article{
width:100%;
background:yellow;  
border:1px solid red;
 }

</style>
        <div class="content" role="main">
            <article>

                <p>This is my text!</p>
            </article>
        </div>
4

1 に答える 1

2

要素に折りたたまれているデフォルトの余白がp要素にあります。に境界線を追加すると、その崩壊が発生するのを防ぎ、要素とそのデフォルトのマージンが含まれるようになります。articlearticlep

.9746589% のパディングは両方の状況で適用されますが、それを配置したため、.content実際にはその中articleにある との間のマージンの崩壊の影響を受けませんp。ただし、境界線と同様にそれを削除すると、余白がすべての要素で崩壊し、緑色の背景が完全に消えてしまいます。つまり、境界線が と の間のマージンの崩壊をブロックしているようarticleにp、パディングも.contentとarticleとその内容の間のマージンの崩壊をブロックしています。

最後に、マージンは垂直方向にのみ折りたたまれるため、幅を設定しても違いはありません。

于 2013-08-24T06:14:59.177 に答える