Equal item margin in multicolumn list

I have a long list which I would like to display in multicolumn mode. For simplicity let’s each item is one-line only. I would like items to be evenly spaced and aligned to the top. This works correctly if there is no margin around items.

However, I would like to add some space. Alas, using margin for li:

ul {-webkit-column-count: 3; column-count: 3; -moz-column-count: 3; list-style-type: none} li { margin: 5px} breaks top-alignment:

The only solution I found is to use li {border: 5px solid white} This solves the problem for Firefox, but Safari breaks the border (which looks like a bug to me BTW):

Is there any solution which works for all the popular browsers?

My sample code is here: https://jsfiddle.net/L59y0d06/