Margin messing up percentage based width - css

Question

I have a <ul> inside of a width: 100%; container.
Each <li> has width: 25%;.
I want to have a margin-left on the li elements, but this screws up the width %.
Here is the fiddle showing the issue: http://jsfiddle.net/u3hTW/
To 'correct the issue, I can apply box-sizing to the li elements and use padding instead of margin, but the 'kicker' is that I want the nth-child(1) to have no margin or padding which causes it it to look different from the rest of the li elements.
Here is a fiddle showing that: http://jsfiddle.net/u3hTW/1/
I am wondering if there is a better way to be approaching this. The goal is to maintain a % based width, with space between all but the first child.

Answer 1

I would suggest using a % for your width, and for your margins.
.list li {
float: left;
width: 23%;
margin-left: 2.66%;
}
.list li:nth-child(1) {
margin-left: 0%;
}
FIDDLE showing that approach
In general to get spacing between containers I prefer margin, because later you may need inner padding for something else, or run into cross-browser box-sizing issues with padding.

Answer 2

The thing is, you're already using your 100% by 4x25% width of each li element. So when you add the margin, the last one will 'jump', because < 25% of the container div remains.
What you can do is:
Make your li's a little smaller, like 23% or so, and use percentage for your margins. A little calculations is required to make sure everything is spaced apart evenly.
Use flexbox (please check if browsersupport meets your requirements)
A compleet guide to this relatively new css boxmodel can be viewed here, as done by Chris Coyier: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

This is the formula to calculate the width of the columns with the method suggested by cjspurgeon:
w = 100 - 2mc
---------
c
Where:
w = width of the column
m = margin expressed in %
c = number of columns
The constant 100 = 100%, or total width of columns + margins. The constant 2 is the two margins considered (left and right)
So, say you want 6 columns with a margin of 1.7% left and right:
w = (100 - 2(1.7 * 6)) / 6
w = 13.2666%
Your selector would look like this:
.column {
width: 13.2666%;
margin: 1.7%;
float: left;
/* whatever else is required */
}