html - How do I calculate the width of each element as a percentage if the elements have margins? -

in example below, how calculate width percentage each of li elements fit on 1 line? understand it's not 25% since have account new margins, set to?

html (jsfiddle)

* {    margin: 0;    padding: 0;  }  div {    width: 100%;  }  li {    display: inline-block;    float: left;    list-style: none;    margin-right: 1.25em;    width: 25%;  }  li:last-child {    margin-right: 0;  }  img {    width: 100px;  }

<div>    <ul>      <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>      <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>      <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>      <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>    </ul>  </div>

i think li should be

li {     display: inline-block;     float: left;     list-style: none;     width: 25%; } 

delete margin-right: 1.25em in li of css