How to create a gap between WooCommerce gallery thumbnails without using flex or pseudo elements

Let’s say we have a product page in our store with a row of thumbnails below the main image.

.woocommerce div.product div.images .flex-control-thumbs li {
    width: 25%;
    float: left;
    margin: 0;
    list-style: none;
}

No padding, everything together. Not bad, but we want to create a gap between them. We can do this without using flex or pseudo elements. Just set the right margin (this will be our gap) for <li> tags as follows. Remember to set box-sizing: border-box to prevent the last element from falling.

.woocommerce div.product div.images .flex-control-thumbs li {
    padding: 0 4% 0 0px;
    box-sizing: border-box;
}

We have a gap, but of course we don’t want a gap after the last element. To achieve this, set the right margin for the <ul> tag to -4%.

.woocommerce div.product div.images .flex-control-thumbs {
    margin: 4% -4% 0 0%;
}

Done!