How do I stop display:none or display:hidden from adding too much white space?

Store Design
1

I want to display icons alongside my products and have them displaying as inline blocks and am using metafields to pick up the correct icons for each product.

If a product doesn’t have a certain feature, the icon will not exist. So instead of showing a broken image on the page, I have hidden it using display:hidden;

The problem is it still leaves a blank space where that icon should be (see the below picture).

screenshot1.png
screenshot1.png627×300 14.4 KB

Then I tried using display:none; but that changes the layout, so there is too much white space - see the below picture.

screenshot2.png
screenshot2.png629×363 13 KB

Is there a way around this? I want all the icons to display nicely next to each other and not have blank spaces?

I am a total newbie picking up bits of code from various websites online to get this far!

The code I have is below:

.product__feature_washable {
display: inline-block;
position: relative;
width: 100px;
height: 100px;
}

.feature__imgW {
{%- if size > 0 -%}
display: inline-block;
width: 100px;
height: 100px;
{%- else -%}
display: none;
border:0;
margin:0;
padding:0;


{%- endif -%}
}

Thanks