css margin-bottomが機能しません

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