what “padding-bottom: 1px;” for a CSS round corner box?

Question

i have these HTML\\CSS for a simple round box. it works well but i don't understand why put "padding-bottom: 1px;" for "box". i can see the different between have this padding and without this padding. just don't understand why it works like these. In the Chrome the space in the bottom observably more than 1px.

here is picture compare the difference and here is the code

 <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;}

Thanks a lot ~

Answer 1

The margin-bottom of your <p> is added to the padding of your box . So you don't see 1 px but 1px + 10px .

.box p  {margin-bottom:0}

Answer 2

The padding avoids margins to collapse:

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

Two margins are adjoining if and only if [...] no padding [...] separate them

Without it, it's as the bottom margin is on .box .