保证金 - 底部不起作用

Question

我想在产品div之间留出一点空白，但是底边距不起作用。我也使用了position: absolute，但没有任何变化。请帮助我，因为我正在做我的项目。

Output of current code

#mai-contant {
  width: 100%;
  max-width: 840px;
  border: 1px solid;
  float: right;
}

.product {
  width: 100%;
  max-width: 271px;
  background-color: black;
  border: 1px solid;
  float: left;
  margin-right: 12px;
  overflow: hidden;
  position: relative;
  margin-bottom: 5px;
}

<div id="mai-contant">
  <ul>
    <li>
      <div class="product"> 
        <img src="../images/004.jpg"> 
      </div>              
      <div class="product"> 
        <img src="../images/004.jpg"> 
      </div>
      <div class="product">
        <img src="../images/004.jpg"> 
      </div>
    </li>
    <li>
      <div class="product"> 
        <img src="../images/004.jpg">  
      </div>
      <div class="product"> 
        <img src="../images/004.jpg">   
      </div>
      <div class="product"> 
        <img src="../images/004.jpg">
      </div>
    </li>       
  </ul>
</div>

Answer 1

要点是打破了流量。删除列表样式：

#mai-contant > ul {
  list-style: none;
}

Answer 2

添加以下css代码行：

#mai-contant ul li:after {
  content: "";
  display: table;
  clear: both;
}