Background color spreads/covers outer div when applied to inner div

I have a div followed by another div

<div class="myclass">
  <div>Some Data</div>
</div>

and the class content like

.myclass div {
  background-color: #fff;
  border: 1px solid #000;
  padding: 4px 16px;
}

Here background-color is not only applied to inner div but also to the outer div.

Shouldn't it apply to the inner div only? Are there 开发者_运维技巧any other possible ways?

I am not able to specify class to inner div as it is dynamically generated by other api..

Thanks in advance..

Apply the padding to the outer div:

http://jsfiddle.net/xCedS/

.myclass {
    padding: 4px 16px;
}
.myclass div {
    background-color: #fff;
    border: 1px solid #000;
}

Original answer that ended up working for the OP: https://stackoverflow.com/revisions/6520122/1

Your CSS is correct for what you want to do. The issue you have is in the way the sizes on the two divs is calculated.

Unless you have any other content inside div.myclass, its size will be set by the div inside it - basically, the inner div completely fills the outer div.

You could try adding:

.myclass {padding:16px;}

to see the difference - it will put space between the two divs.