Applying Padding to Images in Table Layout

HTML

<ul>
  <li><img src="http://walops.com/wp-content/uploads/Puppy-Awesome-Wallpaper-100x100.jpg" /></li>
  <li><img src="http://photos.the-scientist.com/legacyArticleImages/2011/08/panda-200x100.jpg" /></li>
</ul>

CSS

body {
  margin: 0;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: table;
  border-collapse: collapse;
   width: 100%;
}
li {
  display: table-cell;
}
img {
  display: block;
  float: right;
  margin-top: -4px;
  width: calc(100% - 8px);
}