How can I add padding to divs without using a inner div with 960gs?

I'm using 960gs, and am trying to add padding to divs without using an inner div.

You see, if you add padding to the actual div it will开发者_开发问答 break the layout created by 960gs, and the only way I have found to solve this is to create another div within and apply the padding to that.

I guess there's no problem with this method, I just find the second div unnecessary and I'd rather not use it... any ideas?

---

Doesn't box-sizing work?

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

div {
    width: 100px;
    box-sizing: border-box;
}

border-box The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode.

---

That's one of the main drawbacks of any grid system. Unfortunately, to my knowledge, there's no way around the padding problem other than to add extra markup. As such, adding an inner div is recommended method (one that doesn't have a "grid_xx" class attributed to it).

However, if you're feeling brave (and ready for alot of coding), you could attribute padding directly to the child elements. Here's the code for the two solutions:

<div class="grid_12">
 <div class="inner_div" style="padding:10px">
  <p>This is some sample text</p>
 </div>
</div>

Or you could leave out the inner div, and use the styles directly on the child elements like this:

<div class="grid_12">
 <p style="padding:10px">This is some sample text</p>
</div>

Obviously you could use CSS instead of inline CSS, but the principles would be the same :)

Hope it helps.

You could also have a look at the Blueprint or YUI CSS framework, but as far as I know they've got exactly the same issue.