0

私は単純な丸い箱のためにこれらのHTML\CSSを持っています。それはうまく機能しますが、なぜ「padding-bottom：1px;」を置くのかわかりません。「ボックス」の場合。このパディングがある場合とない場合の違いがわかります。なぜそれがこのように機能するのか理解できません。Chromeでは、下部のスペースが1pxを超えています。

ここに違いを比較する写真があり、ここにコードがあります

 <div class="box">
 <h2>Lorem Ipsum</h2>
 <p>Lorem ipsum dolor sit amet, sapien.</p>
 </div>




.box {width: 348px; 
      background: #FF9 url(images/bottom.png) no-repeat left bottom;
      padding-bottom: 1px;}
.box h2 {background: url(images/top.png) no-repeat left top;
         margin-top: 0;
         padding: 20px 20px 0 20px;}

どうもありがとう〜

4

2 に答える 2

0

あなたののmargin-bottomはあなたのの<p>に追加されpaddingますbox。したがって、1ピクセルではなく、1ピクセル+10ピクセルが表示されます。

.box p  {margin-bottom:0}
于 2013-02-14T06:03:55.930 に答える
0

パディングは、マージンが折りたたまれるのを防ぎます。

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

[...]パディングなし[...]で区切られている場合に限り、2つのマージンが隣接しています。

それがないと、下マージンがオンになり.boxます。

于 2013-02-14T17:13:42.743 に答える