Как добавить пространство между элементами встроенного блока?

Чтобы быть ясным, я не хочу удалить пространство между встроенными блоками - хочу добавить его.Как добавить пространство между элементами встроенного блока?

Что я хочу - это иметь сетку элементов меню, которая может содержать 2, 3 или 4 элемента для строки, которую я хотел бы использовать, используя медиа-запросы.

Как я могу добавить пробел между моими ли, но также есть без полей слева и справа от каждой строки? (Padding не будет исправлять это.) Могу ли я достичь этого, используя только 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>

источник

2015-07-22 user3821345

HTML, не является действительным литий должен быть непосредственно под ул или ол. – Stickers

Может быть, это поможет вам

<html><head> 
<style> 
* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    border: solid 1px; 
    font-size: 0; 
} 
#main { 
    max-width: 452px; 
    margin: 0 auto; 
} 
.item { 
    display: inline-block; 
    width: 150px; 
} 
.item1 { 
    display: inline-block; 
    width: 150px; 
    padding:0px 4px; 
} 
.item img { 
    width: 200px; 
} 
.clearfix { 
    overflow: auto; 
} 
li { 
    list-style-type: none; 
} 
</style> 

    </head> 
    <body> 
    <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="item1 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> 

</body></html>

источник

2015-07-22 12:32:00 Anshul

Это хорошая идея, если немного странно, это работает. благодаря – user3821345

Вы пробовали изменения отступов:

.item{ 
    display: inline-block; 
    width: 200px; 
    padding: 5px; 
}

источник

2015-07-22 12:16:52 Adnan

Да, спасибо. Извините, если это было неясно, но я не хочу пробела или поля, где мои элементы li соответствуют родительскому div. Я хочу, чтобы края сидели против div. – user3821345

Вы должны комментировать место между и следующим

или сразу же в одной строке. Встроенные элементы видят возврат каретки как 3px margin (не знаю почему). Вы можете сделать это вот так:

– Kristine

Как добавить пространство между элементами встроенного блока?

ответ

Смежные вопросы