Just to clarify, I am not looking to delete space between inline-block elements - rather, I want to insert it.
My goal is to create a grid of menu items that can accommodate 2, 3, or 4 items per row, and I hope to achieve this using media queries.
Is there a way for me to add spacing between my li items while ensuring there is no margin on the left and right sides of each row? (Padding won't resolve this.) Can this be accomplished solely with CSS?
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: solid 1px;
font-size: 0;
}
#main {
max-width: 450px;
margin: 0 auto;
}
.item {
display: inline-block;
width: 200px;
}
.item img {
width: 200px;
}
.clearfix {
overflow: auto;
}
li {
list-style-type: none;
}<div id="main">
<li class="item clearfix">
<a href="project.html">
<div class="thumb">
<img src="http://static01.nyt.com/images/2015/06/23/business/greece-portraits-restauranteur/greece-portraits-restauranteur-mediumThreeByTwo225.jpg" alt="Portraits From Greece as It Endures a Crisis">
</a>
</li>
<li class="item clearfix">
<a href="project.html">
<div class="thumb">
<img src="http://static01.nyt.com/images/2015/06/23/business/greece-portraits-restauranteur/greece-portraits-restauranteur-mediumThreeByTwo225.jpg" alt="Portraits From Greece as It Endures a Crisis">
</div>
</a>
</li>
</div>