如何在行内块元素之间添加空格？答案

【问题标题】：How to add space between inline-block elements?如何在行内块元素之间添加空格？
【发布时间】：2015-07-22 21:09:14
【问题描述】：

明确地说，我不想删除行内块元素之间的空间 - 我想添加它。

我想要的是有一个菜单项网格，每行可以有 2、3 或 4 个项目，我想使用媒体查询来实现。

如何在我的 li 项目之间添加空格，但又每行的左右两侧没有边距？（填充不能解决这个问题。）我可以只使用 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>

【问题讨论】：

HTML 无效 li 必须直接在 ul 或 ol 下。

标签： html css

【解决方案1】：

也许这会对你有所帮助

<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>

【讨论】：

【解决方案2】：

您是否尝试过更改填充：

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

【讨论】：

好的，谢谢。对不起，如果不清楚，但我不想要空间 - 我的 li 项目与父 div 相接的边距或填充。我希望边缘靠在 div 上。
您必须注释掉和下一个
之间的空格，或者就在一行中。内联元素将回车视为 3px 边距（不知道为什么）。你可以这样做：