CSS - 删除<li>标记之间的空格

Question

我是2至几个月的前端设计新手。我遇到了一个问题，我无法删除HTML li标签之间的空格

请看一下我的代码：

ul {
  width:100%;
}

ul li {
  list-style-type:none;
  width:100%;
}

.shop-now {
  display:block;
  position:relative;
  top:-121px;
  background-color:white;
  width:42%;
  height:30%;
}

.shop-now > * {
  display:inline-block;
}

.shop-now > h3 {
  
}

<ul>
  <li>
      <img src='http://via.placeholder.com/356x150' />
      <div class='shop-now'>
          <h3>Category 1</h3>
          <span>Shop Now</span>
      </div>
  </li>
  <li>
      <img src='http://via.placeholder.com/356x150' />
      <div class='shop-now'>
          <h3>Category 2</h3>
          <span>Shop Now</span>
      </div>
  </li>
  <li>
      <img src='http://via.placeholder.com/356x150' />
      <div class='shop-now'>
          <h3>Category 3</h3>
          <span>Shop Now</span>
      </div>
   </li>
</ul>

我想摆脱HTML li标签之间的这些空间。

我该怎么做？请指教。

Answer 1

如this JSFiddle所示，要删除<li>周围的间距，请添加此样式规则

li {
   margin: 0
}

希望有所帮助！

Answer 2

差距是因为你将.shop-now div向上移动了121px，即使你改变了位置，div仍然会占据空间。

因此你需要绝对定位，这样就不会占用空间。

ul {
  width:100%;
}

ul li {
  list-style-type:none;
  width:100%;
  position: relative;
}

ul li img{
  display: block;
}

.shop-now {
  display:block;
  position:absolute;
  top:0;
  background-color:white;
  width:42%;
}

.shop-now > * {
  display:inline-block;
}

.shop-now > h3 {
  
}

<ul>
  <li>
      <img src='http://via.placeholder.com/356x150' />
      <div class='shop-now'>
          <h3>Category 1</h3>
          <span>Shop Now</span>
      </div>
  </li>
  <li>
      <img src='http://via.placeholder.com/356x150' />
      <div class='shop-now'>
          <h3>Category 2</h3>
          <span>Shop Now</span>
      </div>
  </li>
  <li>
      <img src='http://via.placeholder.com/356x150' />
      <div class='shop-now'>
          <h3>Category 3</h3>
          <span>Shop Now</span>
      </div>
   </li>
</ul>